Javascript getElementByID von Formulareingabe

Ich stelle ein Formular zur Verfügung, wo der Benutzer eine arithmetische Berechnung eingeben soll. Weiter unten erscheint das Ergebnis, sobald der Benutzer auf Enter klickt. Es könnte nur ein Problem der Syntax sein, aber ich konnte den Fehler nicht finden. Hier ist, was ich bisher getan:Javascript getElementByID von Formulareingabe

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

So wird der Nutzer zum Beispiel geben Sie "1 + 2". Das Ergebnis wird unten angezeigt. Irgendeine Idee wo ist mein Fehler?

Mit freundlichen Grüßen

Quelle

2017-05-24 user9

[input-Element] (https://developer.mozilla.org/en/docs/Web/HTML/Element/input) Selbst -closing und sollte kein End-Tag haben. – Esko

Dies sollte funktionieren:

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

Quelle

2017-05-24 09:32:40 Sebastian

eval() ist böse https://duckduckgo.com/?q=eval+is+evil&atb=v63-1__&ia=web – jmtalarn

der andere anser verwendet 'eval()' auch ... – Sebastian

Danke nochmal für alle Alternativen . Ich hab viel gelernt. Ich denke, was ich bevorzuge, hängt von der konkreten Aufgabe ab. – user9

Try this:

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>

Sie brauchen nicht die Berechnung in einer Form einzureichen, können Sie einfach nativer JavaScript verwenden um das Ergebnis zu berechnen. Und vergessen Sie nicht immer sanieren, bevor eval :)

Quelle

2017-05-24 09:35:15

mit Sie waren fast da, Ihr Code benötigt nur ein bisschen Zwicken - siehe unten (Kommentare im Code als das, was ich getan habe und warum)

Die folgende scheint einen alternatives und sicheren Weg, dies zu tun, ohne (von den second answer in this post genommen Funktion) 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>

Quelle

2017-05-24 09:39:53 Pete

Perfekt. Danke, Pete. – user9

Gern geschehen, glücklich es hilft :) – Pete

Eigentlich habe ich gerade festgestellt, dass es ein kleines Problem gibt. Potenz sollte erkannt werden, oder? Wenn ich 2^2 gebe, gibt es mir 0. – user9

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

Quelle

2017-05-24 09:42:47

Hier ist, wie man das erreichen kann.

eval ist der beste Weg, um das zu tun, aber eval ist riskant zu verwenden, so stellen Sie sicher, den Wert der Eingabe vor der Verwendung eval zu sterilisieren.

Ich verwende diese Regex /(^[-+/*0-9]+)/g, um nur Zahlen und wenige Operatoren (-+/*) zu extrahieren und eval auf diesen Wert zu tun.

Entfernen Sie die <form>, die nicht erforderlich ist, verwenden Sie keypress Event-Listener und prüfen Sie auf Enter-Taste. Tastenkode Schlüssel einzugeben ist 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>

Quelle

2017-05-24 09:55:19

Vielen Dank. Es wirkt wie ein Zauber. Genau das, wonach ich gesucht habe. – user9

@ user9 Sie können die Antwort annehmen, um anderen zu helfen, die richtige Antwort zu kennen. Wenn es für dich funktioniert hat, Danke :) –

Javascript getElementByID von Formulareingabe

Antwort

Verwandte Themen