Question

我提供的表格是用户输入算术计算的。一旦用户点击进入，结果将进一步显示。它可能只是语法问题，但我找不到错误。这是我到目前为止所做的：

<!DOCTYPE html>
<html>
<body>
<p>What do you want to calculate?</p>
<form method="post"><span>Type here:</span><input type="text" id="calc"></input>
</form>
<script>
num_field = document.getElementById("calc");
num_field.onsubmit=function ()
{
    document.getElementById("display_result").innerHTML = num_field;
}
</script>
<p id="display_result"></p>
</body>
</html>

因此，用户应输入例如“1 + 2”。结果如下所示。知道我的错误在哪里？

祝你好运

Answer 1

你差点就到了，你的代码只需要稍微调整一下 - 见下文（代码中的注释，就像我所做的那样以及为什么）

如果不使用eval（从second answer in this post获取的函数），以下似乎是一种替代且更安全的方法：

<!DOCTYPE html>
<html>

<body>
  <p>What do you want to calculate?</p>
  <form method="post" id="form">
    <span>Type here:</span>
    <input type="text" id="calc">              <!-- inputs are self closing no need for closing tag -->
    <input type="submit" value="submit">       <!-- added a submit button -->
  </form>
  <script>
    form = document.getElementById("form");
    num_field = document.getElementById("calc");
    form.onsubmit = function() {                                              // attach this event to the form
      document.getElementById("display_result").innerHTML = evalAlternate(num_field.value);  // add .value here to get the value of the textbox
      return false;                                                           // return false so form is not actually submitted and you stay on same page (otherwise your display result will not be updated as the page is reloaded
    }

 
    function evalAlternate(fn) {             // function safer alternate to eval taken from here: https://stackoverflow.com/questions/6479236/calculate-string-value-in-javascript-not-using-eval
      fn = fn.replace(/ /g, "");
      fn = fn.replace(/(\d+)\^(\d+)/g, "Math.pow($1, $2)");
      return new Function('return ' + fn)();
    }
  </script>
  <p id="display_result"></p>
</body>

</html>

Answer 2

以下是如何实现这一目标。

eval是执行此操作的最佳方式，但eval使用风险很大，因此请务必在使用eval之前清理输入值。

我正在使用此正则表达式/(^[-+/*0-9]+)/g仅提取数字和少数运算符(-+/*)并对该值进行eval。

删除不需要的<form>使用keypress事件侦听器并检查输入密钥。输入键的键码是13

num_field = document.getElementById("calc");
num_field.onkeypress = function(e) {
  if(e.which==13)
  {
     var value = num_field.value.match(/(^[-+/*0-9]+)/g);
     if(!value) return;
     else value = value[0];
     var res = eval(value);
     document.getElementById("display_result").innerText = res;
  }
}

<p>What do you want to calculate?</p>
  <span>Type here:</span>
  <input type="text" id="calc" />
<p id="display_result"></p>

Answer 3

这应该有效：

＆＃13;

calc = document.getElementById("calc");
formula = document.getElementById("formula");
calc.addEventListener('click', function() {
  document.getElementById("display_result").innerHTML = eval(formula.value);
});

＆＃13;

<p>What do you want to calculate?</p>
<span>Type here:</span>
<input type="text" id="formula" />
<button id="calc" type="submit">calc</button>
<p id="display_result"></p>

＆＃13;

eval() JavaScript Method

Answer 4

试试这个：

＆＃13;

var calculation_input = document.getElementById('calculation_input');
calculation_input.onkeydown = function(event) {
  if (event.keyCode == 13) { // Enter key.
    // Sanitize before using eval()
    var calculation = calculation_input.value.replace(/[^-()\d/*+.]/g, '');
    document.getElementById("display_result").innerHTML = eval(calculation);
  }
}

＆＃13;

<p>What do you want to calculate?</p>
<span>Type here:</span>
<input type="text" id="calculation_input" />
<p id="display_result"></p>

＆＃13;

您不需要在表单中提交计算，您只需使用本机javascript来计算结果。在使用eval之前不要忘记始终消毒：）

Answer 5

见下面的小提琴

https://jsfiddle.net/ponmudi/13y9edve/

num_field = document.getElementById("calc");
num_field.onkeydown = (event) => {
    if (event.keyCode === 13) {
        document.getElementById("display_result").innerHTML = eval(num_field.value);
        return false;
    }
}

来自表单输入的Javascript getElementByID

5 个答案: