Question

我想制作一个计算器类型表格，在不提交表格的情况下添加输入的号码目前我制作了这段代码 '

<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
 function myFunction() {
    var y = document.getElementById("txt1").value;
    var z = document.getElementById("txt2").value;
    var x = +y + +z;
    document.getElementById("demo").innerHTML = x;
  }
  window.onload =myFunction() ;
</script>

先谢谢，请帮助我...'

Answer 1

我想你在这里想要做的是当你改变Textbox的任何值时，应该显示答案。尝试使用Jquery。提示：使用.keypress（） https://api.jquery.com/keypress/

Answer 2

首先，您需要将事件侦听器附加到输入。我通过定位类名window.onload在calc触发的函数中完成了此操作。您还想parseFloat这些值。

这是为您提供一个起点，并展示如何触发该功能而无需提交/点击。

function myFunction() {
var y = parseFloat(document.getElementById("txt1").value);
var z = parseFloat(document.getElementById("txt2").value);
var x = y+z;
// If x = NaN empty variable x
if(isNaN(parseFloat(x))){x='';}
document.getElementById("demo").innerHTML = x;
}
window.onload=function(){
var inputs=document.getElementsByClassName('calc');
  for(var i=0; i<inputs.length; i++){
    // Listen for input > Call MyFunction
  	inputs[i].addEventListener('input',myFunction,false);
  }
};

Enter first number:<input type="text" class="calc" id="txt1" name="text1">
Enter second number:<input type="text" class="calc" id="txt2" name="text2">
<p id="demo"></p>

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

在输入字段中输入时添加数字并自动回答如何

2 个答案: