Good morning. Is there any way for the user to type this in a text box:
Does a script run the account automatically and result, in this case, = 1? It is also important that he do this with all operations and that it is in pure javascript.
Thank you.
Yes, this is possible. The easiest way is to use eval(); .
HTML
<input type="text" id="calculator" />
<div id="result"></div>
javascript
var input = document.getElementById('calculator');
var result = document.getElementById('result');
input.addEventListener('keyup', calcular);
function calcular(){
var conta = eval(this.value);
result.innerHTML = conta;
}
The above example grabs an event shadow keyup and runs a function each time a key is released (keyup).
This function runs the eval() which in the background runs this string as code.
There are other, safer and more labor-intensive ways, which involves regex to detect operators such as division, multiplication, and so on. But I think this example answers the question.
eval() : I have to leave a parenthesis: eval () is one of the most powerful tools of JavaScript and can be very useful, but in some cases it raises security problems.
The answer from sergio using eval is a simple solution but it has some problems:
Security: eval will run any Javascript code, not just arithmetic expressions. You have to take care that only values written by the user are evaluated, to avoid vulnerabilities of Cross Site Scripting (XSS) Cross- a>.
Eval is a black box: either it returns the result of the account or nothing. In particular:
If these limitations are important, an alternative is to do the math yourself. Build a parser that converts the text to a syntax tree and evaluate that tree. It's a little too long to describe in an OS post, but you find how to do this in a number of algorithm books and over the internet (I would recommend a top-down parser - it's easier to program in the hand and error messages are simpler )
Based on Sergio's answer , I created a simpler example without using eval() .
var input = document.getElementById('calculator');
var result = document.getElementById('result');
input.addEventListener('keyup', calcular);
function calcular(){
//var conta = eval(this.value);
var conta = new Function("return " + this.value);
var resultado = conta();
result.innerHTML = resultado;
}<input type="text" id="calculator" />
<div id="result"></div>In this case a function is created based on the string sent . Note that some errors will appear on the console at some point because the return type "1 + 1 +", for example, is not valid.
In this case, you could solve it with a simple validation before creating the function. This would solve the "black box" quoted by hugomg in your answer . But we would still have the XSS problem.
This answer is only meant to add knowledge of the various possible possibilities of solving your problem in a simple way.
Here you can find many other examples.