for example: we get the value of the button that clicks on let z = this.getAttribute('value'); , and we have the formula let res = a + b; .

ATTENTION QUESTION: is it possible instead of the plus to insert the variable z , in the name of a dynamic change in the mathematical action in the formula? *

  • is, you collect the necessary line and you do eval or through the designer of function. - Grundy
  • switch on all possible operators. Or a full-fledged interpreter of arithmetic expressions) - vp_arth

3 answers 3

There is an eval operator, as comrade @Grundy mentioned.
But eval - is evil :

 let f = '2 + 2'; document.querySelector('#sign').addEventListener('keyup', function (e) { if (e.keyCode === 13 && this.value.trim() !== '') { calcIt (this.value); this.value = ''; } }); function calcIt (sign) { let _f = f.replace('+', sign); let result = eval(_f); document.querySelector('#result').innerHTML = `${_f} = ${result}`; } 
 <input type='text' id='sign' /> <h3>Result</h3> <span id='result'>2 + 2 = 4</span>

Or follow the advice of fellow @vp_arth .
This option is more secure due to the check (which can also be done with eval , however) and works in those languages ​​where eval does not exist at all:

 let f = [2, 3]; document.querySelector('#sign').addEventListener('keyup', function (e) { if (e.keyCode === 13 && this.value.trim() !== '') { calcIt (this.value); this.value = ''; } }); function calcIt (sign) { let _f = 0; switch (sign) { case '-': _f = f[0] - f[1]; break; case '+': _f = f[0] + f[1]; break; case '*': _f = f[0] * f[1]; break; case '/': _f = f[0] / f[1]; break; default: document.querySelector('#result').innerHTML = `Неизвестный знак "${sign}"!`; return; } document.querySelector('#result').innerHTML = `${f[0]} ${sign} ${f[1]} = ${_f}`; } 
 <input type='text' id='sign' /> <h3>Result</h3> <span id='result'>2 + 3 = 5</span>

    Variation on the subject:

     let f = [2, 3]; document.querySelector('#sign').addEventListener('keyup', function (e) { if (e.keyCode === 13 && this.value.trim() !== '') { calcIt (this.value); this.value = ''; } }); function calcIt (sign) { let res = f[0] * (sign==='*'?f[1]:1) / (sign==='/'?f[1]:1) + (sign==='+'?f[1]:0) - (sign==='-'?f[1]:0); document.querySelector('#result').innerHTML = `${f[0]} ${sign} ${f[1]} = ${res}`; } 
     <input type='text' id='sign' /> <h3>Result</h3> <span id='result'>2 + 3 = 5</span>

    • Zadolbatsya in the operators, if you enter them more :) - user207618
    • The main thing is to observe the priorities =) - vp_arth

    Here's how it happened:

     for (let itemBtn of btn){ itemBtn.addEventListener('click', function (e) { let a = parseInt(inp1.value); let b = parseInt(inp2.value); let c = this.getAttribute('value'); let res = eval(`${a} ${c} ${b}`); span.innerHTML = res; }); }

    The main thing that works.

    • Do not forget to check what exactly you are transferring to eval , otherwise they will quickly insert muck. - user207618 5:56 pm
    • Well, how can it be without it!)))) - Evgeniy R
    • WHAT mader my THANKS to all for the help deleted all? - Evgeniy R
    • This is not a moderator, but a normal participant. And deleted because it does not carry the semantic load. - vp_arth 5:58 pm
    • one
      @EvgeniyR, If we don’t put ten smiles in each line, it doesn’t mean that we’ve been cracking Mr. Smith’s suits :) - user207618