Как мне взять ввод пользователя и сохранить его для использования в функции Javascript?

Question 1

Абсолютный новичок и пытается создать очень простой десятичный в двоичный преобразователь. Я знаю, что существуют встроенные в 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. Любая помощь приветствуется.

javascript html function variables

1

poorbillypilgrim

Answer

Вы должны изменить свое выражение лица:

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 .

Question 2

Вы должны изменить свое выражение лица:

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 .

Как мне взять ввод пользователя и сохранить его для использования в функции Javascript?

1 ответ

Новые вопросы

javascript