来自表单输入的 Javascript getElementByID答案

【问题标题】：Javascript getElementByID from form input来自表单输入的 Javascript getElementByID
【发布时间】：2017-05-24 09:25:27
【问题描述】：

我提供了一个表格，用户可以在其中输入算术计算。一旦用户点击回车，结果就会出现。这可能只是语法问题，但我找不到错误。这是我到目前为止所做的：

<!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”。结果将出现在下方。知道我的错误在哪里吗？

最好的问候

【问题讨论】：

input-element 是自动关闭的，不应有结束标记。

标签： javascript innerhtml getelementbyid

【解决方案1】：

以下是实现这一目标的方法。

eval 是最好的方法，但eval 使用起来有风险，因此请确保在使用eval 之前清理输入的值。

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

删除不需要的<form> 使用keypress 事件侦听器并检查输入键。 回车键的keycode是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>

【讨论】：

非常感谢。它就像一个魅力。正是我想要的。
@user9 您可以接受答案以帮助其他人知道正确答案。如果它对你有用，谢谢:)

【解决方案2】：

您快到了，您的代码只需要稍作调整 - 见下文（代码中的 cmets 是我所做的以及为什么）

以下似乎是不使用 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>

【讨论】：

完美。谢谢，皮特。
其实我只是注意到有一个小问题。效力应该得到认可，对吧？如果我输入 2^2 它给我 0.
不确定是否有一个函数可以在 js 中识别 - 甚至不认为 eval 会 - 你期望什么答案以及你如何得出这个答案 - 我从来没有见过在数学之前
好吧，在这种情况下，我可能会显示“无法解决！”之类的消息。否则看起来它计算错误。我会努力的。谢谢。
我用谷歌搜索了它，发现它意味着权力 - 你可以写一些功能来查看是否有 ^ 然后使用developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案3】：

看下面的小提琴

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

【讨论】：

【解决方案4】：

这应该可行：

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

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

eval() JavaScript Method

【讨论】：

eval() 是邪恶的duckduckgo.com/?q=eval+is+evil&atb=v63-1__&ia=web
再次感谢所有选择。我学到了很多。我认为我应该更喜欢哪一个取决于具体的任务。

【解决方案5】：

试试这个：

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

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

您不需要在表单中提交计算，您可以使用原生 javascript 来计算结果。并且不要忘记在使用 eval 之前始终进行消毒 :)

【讨论】：