文本区域计算

Textarea Calculations

我正在尝试拥有三个文本区域。前两个是加数,最后一个是和。应该发生的是,如果你的数学方程式是正确的,一段会说 true

否则,它会说 false。但是,当我尝试时,该段落什么也没说。 这是我的代码:

<textarea id="x"></textarea>
<textarea id="y"></textarea>
<textarea id="z"></textarea>
<script>
    var x = document.getElementById('x').innerHTML;
  var y = document.getElementById('y').innerHTML;
  var z = x + y;
  var p = document.getElementById('p');
</script>
<button oclick="if (z = document.getElementById('z').innerHTML) {p.innerHTML = true} else {p.innerHTML = false}">Calculate</button>
<br>
<p id="p"></p>

首先使用 addEventListener 从 JS 代码将点击事件附加到您的按钮会更好(避免内联事件),然后将您的代码放入其中,您必须使用 .value insted innerHTML 获取文本区域的值。

另请注意,当您想要比较两个元素时,您应该使用双等号 ==,并且因为我们需要执行数学运算,所以我们应该使用 Number() 方法将我们的值转换为数字。

应该是这样的:

document.getElementById("calculate").addEventListener("click", function() {
  var x = Number( document.getElementById('x').value );
  var y = Number( document.getElementById('y').value );
  var z = x + y;
  var p = document.getElementById('p');

  if (z == document.getElementById('z').value) {
    p.innerText = "true";
  } else {
    p.innerText = "false";
  }
});
<textarea id="x"></textarea>
<textarea id="y"></textarea>
<textarea id="z"></textarea>
<button id="calculate">Calculate</button>
<br>
<p id="p"></p>

首先,我建议你在这里使用输入而不是 第二个是,我建议你在使用'onclick'

时使用函数

结果如下:

<html>
<body>
<input type='number' placeholder='x: (input number please)' id="x" />
<input type='number' placeholder='y: (input number please)' id="y" />
<input type='number' placeholder='z: (input number please)' id="z" />
<br />
<button onclick="CheckByFormula()">Calculate</button>
<br />
<p>Check result: z=x+y ?</p>
<p id="p"></p>
<script type='text/javascript'>
  function CheckByFormula(){
    var x = parseInt(document.getElementById('x').value);
  var y = parseInt(document.getElementById('y').value);
  var z = x + y;
  //alert('having these params:\n x='+x+' y='+y+' z='+z);
  var p = document.getElementById('p');  
  z1 = parseInt(document.getElementById('z').value);
  alert('z1='+z1+' z='+z);
    if(z1 == z){
        document.getElementById('p').innerHTML = 'true'
    } 
    else {
        document.getElementById('p').innerHTML = 'false';
    }
  }
</script>

</body>
</html>

https://jsfiddle.net/14pm7ypz/2/