时间戳

首页 > 解决方案 > 更改任何文本输入时函数运行

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

问题描述

我制作了一个计算器工具，它有大约 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>

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

标签： javascriptjqueryhtmlcalc

解决方案

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>

推荐阅读