javascript - 任何文本输入更改时运行函数

Question

我制作了一个计算器工具，它有大约 10 种不同的文本输入供用户在单击“计算”按钮运行函数并返回计算值之前完成。我希望每次更改文本输入时都运行该函数，而不是使用按钮。这是一个简单的示例:

function calculate() {
	//Inputs ("parseInt" converts string to Int)
	var A = parseInt(document.getElementById("A").value);
	var B = parseInt(document.getElementById("B").value);		
	var total = A*B;

	//Output
	document.getElementById("total").value = total;
};

	<input type="text" id="A"> x
<input type="text" id="B">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>

上面的示例有两个文本输入，当单击按钮时它们会相乘。执行此操作的最佳方法是什么，以便每次更改文本输入时都计算输出？请记住，实际项目有多个文本输入。

Answer 1

同时在文本输入中执行 oninput 上的函数:

function calculate() {
  //Inputs ("parseInt" converts string to Int)
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);		
  var total = A*B;

  //Output
  document.getElementById("total").value = total;
};

<input type="text" id="A" oninput="calculate()"> x
<input type="text" id="B" oninput="calculate()">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>

或者:您可能希望使用 forEach() 附加事件:

function calculate() {
  //Inputs ("parseInt" converts string to Int)
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);		
  var total = A*B;

  //Output
  document.getElementById("total").value = total;
};

var allTextInput = document.querySelectorAll('input[type=text]');
[...allTextInput].forEach(el => el.addEventListener('input', calculate));

<input type="text" id="A" oninput="calculate()"> x
<input type="text" id="B" oninput="calculate()">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>