Javascript getElementByID à partir de l'entrée de formulaire

Je fournis un formulaire dans lequel l'utilisateur doit entrer un calcul arithmétique. Plus bas, le résultat apparaîtra, une fois que l'utilisateur frappe entrer. Ce pourrait être juste un problème de syntaxe, mais je n'ai pas pu trouver l'erreur. Voici ce que je l'ai fait jusqu'à présent:Javascript getElementByID à partir de l'entrée de formulaire

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

Ainsi, l'utilisateur entre, par exemple, "1 + 2". Le résultat doit apparaître ci-dessous. Une idée d'où est mon erreur?

Meilleures salutations

Source

2017-05-24 user9

[entrée-élément] (https://developer.mozilla.org/en/docs/Web/HTML/Element/input) est auto -closing et ne devrait pas avoir d'étiquette de fin. – Esko

Cela devrait fonctionner:

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

Source

2017-05-24 09:32:40 Sebastian

eval() est le mal https://duckduckgo.com/?q=eval+is+evil&atb=v63-1__&ia=web – jmtalarn

l'autre anser utilise 'eval()' aussi ... – Sebastian

Merci encore pour toutes les alternatives . J'ai beaucoup appris. Je pense que celui que je devrais préférer dépend de la tâche concrète. – user9

Essayez ceci:

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>

Vous n'êtes pas obligé de soumettre le calcul sous une forme, vous pouvez simplement utiliser javascript natif pour calculer le résultat. Et ne pas oublier de toujours aseptiser avant d'utiliser eval :)

Source

2017-05-24 09:35:15

Vous étiez presque, votre code juste besoin d'un peu de peaufinage - voir ci-dessous (les commentaires dans le code comme ce que je fais et pourquoi)

Le suivant semble être un autre et plus sûr moyen de le faire sans utiliser eval (fonction de la prise 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>

Source

2017-05-24 09:39:53 Pete

Parfait. Merci, Pete. – user9

De rien, heureux ça aide :) – Pete

En fait, je viens de remarquer qu'il y a un léger problème. La puissance devrait être reconnue, n'est-ce pas? Si j'entre 2^2 cela me donne 0. – user9

voir le fi ci-dessous 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; 
    } 
}

Source

2017-05-24 09:42:47

Voici comment vous pouvez y parvenir.

eval est la meilleure façon de le faire, mais eval est risqué d'utiliser alors assurez-vous désinfectez la valeur d'entrée avant d'utiliser eval.

J'utilise cette expression rationnelle /(^[-+/*0-9]+)/g pour extraire uniquement des nombres et quelques opérateurs (-+/*) et de faire eval sur cette valeur.

supprimer le <form> qui n'est pas requis utiliser l'écouteur d'événement keypress et vérifier la touche d'entrée. mot de code de touche d'entrée est 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>

Source

2017-05-24 09:55:19

Merci beaucoup. Il fonctionne comme un charme. Exactement ce que je cherchais. – user9

@ user9 Vous pouvez accepter la réponse pour aider les autres à connaître la bonne réponse. Si cela a fonctionné pour vous, merci :) –

Javascript getElementByID à partir de l'entrée de formulaire

Répondre

Questions connexes