Javascript getElementByID from form input

我提供了一个表单，用户应该在其中输入算术计算。再往下看，一旦用户按回车键，结果就会出现。这可能只是语法问题，但我找不到错误。这是我到目前为止所做的：

<!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"。结果如下。知道我的错误在哪里吗？

此致敬意

以下是实现此目的的方法。

eval是执行此操作的最佳方法，但使用eval有风险，因此请确保在使用eval之前清理输入的值。

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

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

你快到了，你的代码只需要一些调整 - 见下文(代码中的注释是我所做的以及为什么(

以下似乎是在不使用 eval 的情况下执行此操作的另一种更安全的方法(函数取自本文的第二个答案(：

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

请参阅下面的小提琴

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

这应该有效：

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

试试这个：

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 :)之前始终进行消毒

相关内容

最新更新

热门标签：