Блог

Главная - Вопросы по программированию - Добавление двух чисел в javascript из двух входных данных в форме

Добавление двух чисел в javascript из двух входных данных в форме

#javascript #html #forms #frontend #addition

Вопрос:

Я новичок в JavaScript. В результате я практиковал некоторые коды, которые считывают два числа из формы и отображают результат нажатием кнопки. Я также хочу добавить кнопку сброса, чтобы начать новый расчет. Проблема в том, что поле результата не обновляется при нажатии кнопки, но кнопка сброса работает. Ниже приведен мой код:

 const btn = document.getElementById('btn');
const calc = document.getElementById('calc');

function add() {
  const num1 = parseInt(document.getElementById('num1').value);
  const num2 = parseInt(document.getElementById('num2').value);
  const result = document.getElementById('result');

  if (num1 amp;amp; num2 !== NaN) {
    calc.addEventListener('click', () => {
      let sum = num1   num2;
      result.value = sum;
      return false;
    });

  } else {
    alert("Enter Valid Number");
  }
}

btn.addEventListener('click', () => {
  num1.value = " ";
  num2.value = " ";
  result.value = " ";
}); 
 <form id="adder" onsubmit="return add();">
  <input type="text" name="num1" id='num1' placeholder="enter number">
  <input type="text" name="num2" id='num2' placeholder="enter number">

  <button id="calc" type="button">Add</button>
  <input type="text" name="num3" id="result" readonly placeholder="Result">

  <button type="button" id="btn">Clear</button>
</form>

Ответ №1:

Вам нужно создать addEventListener calc кнопку снаружи add(); и позвонить add(); в event ;

 const btn = document.getElementById('btn');
const calc = document.getElementById('calc');

function add() {
  const num1 = parseInt(document.getElementById('num1').value);
  const num2 = parseInt(document.getElementById('num2').value);
  const result = document.getElementById('result');
  if (num1 amp;amp; num2 !== NaN) {
    let sum = num1   num2;
    result.value = sum;
    return false;

  } else {
    alert("Enter Valid Number");
  }
}
calc.addEventListener('click', () => {
  add();
});
btn.addEventListener('click', () => {
  num1.value = " ";
  num2.value = " ";
  result.value = " ";
}); 
 <form id="adder" onsubmit="return add();">
  <input type="text" name="num1" id='num1' placeholder="enter number">
  <input type="text" name="num2" id='num2' placeholder="enter number">

  <button id="calc" type="button">Add</button>
  <input type="text" name="num3" id="result" readonly placeholder="Result">

  <button type="button" id="btn">Clear</button>
</form>

onsubmit не срабатывает, потому что вы не добавили кнопку отправки, во всяком случае, этот метод не работает, потому что вы добавляете eventListener кнопку, которая будет работать после нажатия кнопки отправить.

Метки: