Как мне взять ввод пользователя и сохранить его для использования в функции Javascript? - PullRequest
1 голос
/ 26 октября 2019

Абсолютный новичок и пытается создать очень простой десятичный в двоичный преобразователь. Я знаю, что существуют встроенные в Javascript более простые и понятные способы конвертации в разные базы чисел, но мне понравилось создавать свой собственный скрипт с нуля. Вот код:

<!DOCTYPE html>
<html>
<head>
  <title>GetBit</title>
</head>
<body>

  <h1>Decimal to Binary</h1>
    <p><input type="number" min="0" id="decimal"</p>
    <button type="button" onclick="getBit()">Submit</button>
    <p>here is your answer:</p><p id="binary"></p>


<script>
function getBit() {
  var n = document.getElementById("decimal").value;
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
  var bit = document.getElementById("binary").innerHTML;
}


</script>
</body>
</html>

Я уверен, что это зверский код, но я провожу испытание огнем. Действительно, в целом, я хотел бы лучше понять, как взаимодействуют пользовательский ввод и функции Javascript, и как лучше всего размещать пользовательский ввод в переменные, а затем использовать это значение для вывода нового значения (например, взятие десятичного числа и вывод двоичного кода). ,

Я протестировал свою функцию getBit () в консоли, и она вернула правильный двоичный файл. Я немного изменил его для моего HTML. Вот оригинальный JS, который работал:

function getBit(n, bit = "") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
}

Я в тупике от того, как это должно быть переведено в элемент в HTML. Любая помощь приветствуется.

1 Ответ

1 голос
/ 26 октября 2019

Вам нужно перевернуть выражение:

document.getElementById("binary").innerHTML = bit

Исходное выражение назначило бы текущий HTML-контент выбранного элемента DOM в вашу переменную bit.

document.querySelector('#decimal').addEventListener('input',function(ev){
   document.getElementById("binary").innerHTML=getBit(ev.target.value)});
   
function getBit(n, bit="") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = +n + "" + bit;
    return bit
  }
}
<h1>Decimal to Binary</h1>
<p><input type="number" min="0" id="decimal" placeholder="enter a decimal number">
<p>in binary this is:</p>
<p id="binary"></p>

Я изменил свой прослушиватель событий, чтобы теперь искать события input, а также оператор в вашем условии else на bit = +n + "" + bit; как десятичное число 0 был бы "преобразован" в 1.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...