Handles error within if Javascript

Question

I am building a calculator, which in this specific case, the user will click a button and a simple rule equation will appear. Then it will replace the variables of the formula, which is in the input, and after the values have been entered into the equation, the user will click again on the button and I want to make a check where if inside the input contains a valid equation it returns the correct result. But I could not find something similar on the net about this type of error handling. Thanks for your help.

Follows the Javascript:

function regraDeTresSimples(){
     var vis = document.calcform.visor;
     var resultado;
     if (vis.value == "" ) {
          document.calcform.visor.value = "x=(A*B)/C";
          document.getElementById("explicacao").src = "img/regradetressimples.JPG";
          document.getElementById("explicacao").alt = "Aprenda a calcular regra de     três";
          document.getElementById("explicacao").title = "Posição de cada variavel  dentro da regra de três simples";
     } else if(isNaN(vis.value)){
          resultado = eval(vis.value);
     }
     vis.value = resultado;
}

Follows HTML:

<form name="calcform" method="post" action="">
    <input type="text" name="visor" id="visor" value=""/>
    <input type="button" name="dividir" class="formula" value="R3s" title="Regra de Três simples" onclick="regraDeTresSimples()" />
</form>

Answer 1

Friend, personally I would separate the inputs so you have more control in the validation, and avoid as much as possible the use of the function eval.

Here’s a short example of how you could do it using various inputs and assembling a visual representation of the html expression (very precarious here for just one example).

In function validado() you could instead of just returning a true/false, also update some message field on the screen for the user to view what he did wrong.

I hope I’ve helped.

(function() {

var btnCalcular = document.getElementById("calcular");

var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");

var resultado = document.getElementById("resultado");

btnCalcular.addEventListener("click", function(e) {
  if(validado()) {
    resultado.textContent = (A.value*B.value)/C.value;
  } else {
    alert("Inválido!");
  }
});

function validado() {
  return A.value && B.value && C.value
}

})();

<div>
  <p>
    X = ( <input id="A" type="number" /> * <input id="B" type="number" /> ) / <input id="C" type="number" /> 
  </p>
  <button id="calcular">Calcular</button>
  
  <span id="resultado"></span>
  
</div>