从表单中的两个输入中添加 javascript 中的两个数字

Question

我是 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 && 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>

Answer 1

您需要在 add(); 之外创建 calc 按钮的 addEventListener 并将 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 && 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，它会在按下提交后起作用。

从表单中的两个输入中添加 javascript 中的两个数字

Adding two numbers in javascript from two inputs in a form

html

javascript

forms

frontend

addition