フォーム入力から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

これは動作するはずです：

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>

：

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

もう1人のアンサーが 'eval（）'を使用しています... – Sebastian

もう一度すべての選択肢に感謝します。私はたくさんのことを学んだ。私はどちらを選ぶべきかは具体的な課題にかかっていると思います。 – user9

はこれを試してみてください

あなたは、あなただけの結果を計算するためにネイティブの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

以下Fiを提供してご覧ください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を使用して数字だけを抽出し、わずかな演算子(-+/*)とその値に対してevalを実行しています。

不要な<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>

出典

2017-05-24 09:55:19

ありがとうございました。それは魅力のように働く。ちょうど私が探していたもの。 – user9

@ user9答えを受け入れて、他の人が正しい答えを知っているのを助けることができます。それがあなたのために働いた場合は、ありがとう:) –

フォーム入力からJavascript getElementByID

答えて

関連する問題