从表单输入获得Javascript getElementByID

我正在提供一个表单，用户应输入一个算术计算。一旦用户点击进入，结果就会出现。这可能只是一个语法问题，但我找不到这个错误。下面是我做的，到目前为止：从表单输入获得Javascript getElementByID

<!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” 进入。结果如下所示。任何想法，我的错误在哪里？

问候

来源

2017-05-24 user9

[输入元件（https://developer.mozilla.org/en/docs/Web/HTML/Element/input）是自 - 关闭，不应该有结束标签。 – Esko

这应该工作：

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

来源

2017-05-24 09:32:40 Sebastian

eval（）是邪恶的 https://duckduckgo.com/?q=eval+is+evil&atb=v63-1__&ia=web – jmtalarn

另一个anser也使用'eval（）'... – Sebastian

再次感谢所有的替代方案。我学到了很多。我认为我应该选择哪一个取决于具体的任务。 – user9

试试这个：

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

来源

2017-05-24 09:35:15

之前，请务必消毒你几乎在那里，你的代码只是需要一些调整 - 见下文（代码中的注释为我做了什么以及为什么）

的下面似乎是一个备选和更安全的方式来做到这一点，而无需使用的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>

来源

2017-05-24 09:39:53 Pete

完美。谢谢，皮特。 – user9

不客气，开心有帮助:) – Pete

其实，我刚刚注意到有一个小问题。效力应该得到承认，对吗？如果我输入2^2，它会给我0. – user9

看到下面的音响ddle

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

来源

2017-05-24 09:42:47

这里是你如何能做到这一点。

eval是做这件事的最佳方式，但eval存在使用风险，所以请确保在使用eval之前清理输入值。

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

删除不需要的<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>

来源

2017-05-24 09:55:19

非常感谢。它像一个魅力。正是我在找的东西。 – user9

@ user9您可以接受帮助其他人知道正确答案的答案。如果它适合你，谢谢:) –

从表单输入获得Javascript getElementByID

回答

相关问题