從表單輸入獲得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

回答

相關問題