Связывание HTML <input>и <output>с функцией JavaScript

Question

Итак, у меня есть этот код, который в основном выполняет простую математическую функцию, но теперь я не знаю, как связать теги <input> и <output> с JavaScript, чтобы при вводе пользователем цифры в <input> сценарий запускается, и результат отображается в <output> Любая помощь приветствуется, и, пожалуйста, будьте полезны, поскольку я все еще учусь.

function computation(number) { 
  let newNumber = number + (1/100 * number) + 1000;
  let roundedNumber = Math.round(newNumber/100)*100;
  return roundedNumber;
}

<p>Enter Amount Here:</p>
<input type="text" name="value"></input>
<button class="button" onClick="computation()">Calculate!</button>
<p>Final Amount</p>
<div class="output">
    <output for="roundedNumber" name="finalAmount"></output>
</div>

Answer 1

Следуйте ниже простых шагов. 1) Добавьте идентификаторы к вашим входным и выходным тегам, просто поставьте так же, как имя

<input type="text" name="value" id="value" />
<output for="roundedNumber" name="finalAmount" id="finalAmount"/>

2) использовать JS document.getElementById("inputid").value

let num = document.getElementById("value").value

3) используйте тот же способ для установки значения. давайте предположим, что вы хотите показать его в теге абзаца.

<p id="output"></p>
document.getElementById("output").innerHTML =newNum;

4) для активных тегов используйте .value момент .innerHTML

Answer 2

Во-первых, у вас есть число в качестве параметра для функции, но функция не получает его при вызове. Так что вы можете использовать

document.getElementById('id').value 

, чтобы получить значение. Посмотрите на это.

function computation() { 
  let number = document.getElementById('input1').value;
  let newNumber = number + (1/100 * number) + 1000;
  let roundedNumber = Math.round(newNumber/100) * 100;
  document.getElementById('output1').innerHTML = roundedNumber;
}

<p>Enter Amount Here:</p><br>
<input type="text" name="value1" id="input1">
<button class="button" onClick="computation()">Calculate!</button>
<p>Final Amount</p>
<div class="output">
<output for="roundedNumber" name="finalAmount" id="output1"></output>
</div>