Как определить ввод текстового поля как строку в JavaScript? - PullRequest
Новая
       17

Как определить ввод текстового поля как строку в JavaScript?

0 голосов
/ 08 января 2019

Это для научного проекта, который должен состояться через несколько месяцев. Я начинающий, и я действительно не знаю, что не так с этой простой программой шифрования Цезаря. Я использую ascii, чтобы преобразовать символы в числа, добавить к нему установленное число, затем вернуть букву и повторить для каждого в строке. Он отлично работает, когда я вставляю два набора ввода, но когда я использую текстовое поле для сбора ввода, он дает мне странные символы, которые даже не включены в таблицу ascii. 

var messages = document.getElementById("messages");
var shfBox = document.getElementById("shfBox");
var strBox = document.getElementById("strBox");
var button = document.getElementById("button");

button.addEventListener("click", function() {
  var orgstr = strBox.value;
  var orgshf = shfBox.value;
  var str = orgstr;
  var shf = orgshf;
  var output = "";
  for (var i = 0; i < str.length; i++) {
    var asciiValue = str[i].charCodeAt();
    if (asciiValue >= 65 && asciiValue <= 77) {
      output += String.fromCharCode(asciiValue + shf);
    } else if (asciiValue >= 78 && asciiValue <= 90) {
      output += String.fromCharCode(asciiValue - shf);
    } else if (asciiValue >= 97 && asciiValue <= 109) {
      output += String.fromCharCode(asciiValue + shf)
    } else if (asciiValue >= 110 && asciiValue <= 122) {
      output += String.fromCharCode(asciiValue - shf)
    } else {
      output += str[i];
    }
  }

  document.getElementById("output").innerHTML = output;
  return output;
  return str;
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <ul id="messages"></ul>
  <div>
    <input id="strBox" type="text" style="padding: 10px;">
  </div>
  <div>
    <p></p>
  </div>
  <input id="shfBox" type="number" style="padding: 10px;">
  <div>
    <p></p>
  </div>
  <div>
    <button id="button" type="button" style="padding: 4px;">Submit</button>
  </div>
  <hr>
  <p id="output"></p>
  <script src="script.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 08 января 2019

Основная проблема в том, что ваше добавление в output += ... выполняет конкатенацию строк, а не числовое добавление, потому что orgshf является строкой. Просто замените: 

var orgshf = shfBox.value;

с 

var orgshf = +shfBox.value;

И он мгновенно работает намного лучше, потому что оператор + здесь преобразует значения в числа.

(Вы также можете сделать: 

var orgshf = Number(shfBox.value);

Это в точности то же самое, что и выше, и многие предпочитают его, потому что оно более явное. Как я уже сказал, оба делают одно и то же, и все сводится к личным предпочтениям - сделайте свой выбор.)

Это все еще не идеально, поскольку иногда ваши коды символов дают вам не алфавитные символы. Вам также необходимо изменить диапазоны в операторах if, чтобы они зависели от orgshf. Но я надеюсь, что этого достаточно, чтобы вы могли это исправить, потому что основная проблема заключалась в том, что вы не добавляли цифры так, как думали.

...