更改任何文本输入时功能运行

时间：2018-08-10 08:24:04

标签： javascript jquery html calc

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

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

7 个答案:

答案 0 :(得分：3)

同时在两个文本输入中的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>

OR：：您可能希望将事件附加到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>

答案 1 :(得分：2)

<input type="text" onInput="calculate()" id="A"> x
<input type="text" onInput="calculate()" id="B"> x
<input type="text" onInput="calculate()" id="C"> =
<output id="total"></output>



<script>
function calculate() {
//Inputs ("parseInt" converts string to Int)
var A = parseInt(document.getElementById("A").value);
var B = parseInt(document.getElementById("B").value);
var C = parseInt(document.getElementById("C").value);

var total;
if(isNaN(A)){
  A=1;
}
if(isNaN(B)){
  B=1;
}
if(isNaN(C)){
  C=1;
}
total = A*B*C;  
//Output
document.getElementById("total").value = total;
};
</script>

答案 2 :(得分：1)

您可以将类名称与所有这些输入字段相关联，并向其中添加一个keyup事件。非常适合用于多个元素，因为您可以通过类名称来管理所有内容，而错误或错误的可能性则较小

使用JQUERY 

$('.calculateText').keyup(function(){
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);
  var total = A * B;

  //Output
  document.getElementById("total").value = total;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class='calculateText' type="text" id="A"> x
<input class='calculateText' type="text" id="B">
<input type="button" value="Calculate"> =
<output id="total"></output>

使用JAVASCRIPT 

var elems = document.querySelectorAll('.calculateText');
elems.forEach(function(elem) {
  elem.addEventListener('keyup', function() {
    var A = parseInt(document.getElementById("A").value);
    var B = parseInt(document.getElementById("B").value);
    var total = A * B;

    //Output
    document.getElementById("total").value = total;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class='calculateText' type="text" id="A"> x
<input class='calculateText' type="text" id="B">
<input type="button" value="Calculate"> =
<output id="total"></output>

答案 3 :(得分：1)

您可以对calculate个输入执行onInput。您可能需要使用的一项检查是空白输入或非数字输入值，否则它将在结果中显示NaN。

function calculate() {
	//Inputs ("parseInt" converts string to Int)
	var A = parseInt(document.getElementById("A").value);
	var B = parseInt(document.getElementById("B").value);
  var total;
  if(isNaN(A) || isNaN(B)){
    total = "Invalid Operation";
  }
  else{
	  total = A*B;  
  }

	//Output
	document.getElementById("total").value = total;
};
<input type="text" onInput="calculate()" id="A"> x
<input type="text" onInput="calculate()" id="B">
<output id="total"></output>

答案 4 :(得分：1)

要实现此目的，您还可以从文本字段的calculate()事件中调用input函数：

document.getElementById('calculate').addEventListener('click', calculate);

Array.from(document.querySelectorAll('input')).forEach(function(el) {
  el.addEventListener('input', calculate);
});

function calculate() {
  var A = parseInt(document.getElementById("A").value) || 0;
  var B = parseInt(document.getElementById("B").value) || 0;
  var total = A * B;

  document.getElementById("total").value = total;
};
<input type="text" id="A" class="input"> x
<input type="text" id="B" class="input">
<input type="button" value="Calculate" id="calculate"> =
<output id="total"></output>

请注意在计算中将NaN强制为0，并删除了过时的onclick属性；尽可能使用不引人注目的事件处理程序。

答案 5 :(得分：1)

改为使用事件委托，并在包含所有输入字段的整个容器上侦听input事件-这样，您将只添加一个侦听器，而不是为每个元素手动添加侦听器： 

document.body.addEventListener('input', ({ target }) => {
  console.log('Saw a change on element ' + target.id);
  if (target.id === 'A' || target.id === 'B') {
    var A = parseInt(document.getElementById("A").value);
    var B = parseInt(document.getElementById("B").value);		
    var total = A*B;

    //Output
    document.getElementById("total").value = total;
  }
});
<div>
<input type="text" id="A"> x
<input type="text" id="B">
</div>
<output id="total"></output>
<div>
<input type="text" id="C"> +
<input type="text" id="D">
</div>
<div>
<input type="text" id="E"> /
<input type="text" id="F">
</div>

答案 6 :(得分：1)

绑定元素change，keyup和mouseup事件以触发您的calculate函数。

我建议几个循环和addEventListener：

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;
};

for (var elm of [document.getElementById("A"), document.getElementById("B"), document.getElementById("Calculate")]) {
  for (var st of ['change', 'keyup', 'mouseup', 'click']) {
    elm.addEventListener(st, calculate)
  }
}
<input type="number" id="A"> x
<input type="number" id="B">
<input type="button" id="Calculate" value="Calculate"> =
<output id="total"></output>

相关问题
最新问题