3

I am trying to create a script that will take 2 inputs and calculate the sum. I would like both inputs to be validated before the calculation takes place - inputs must range between 0 and 10.

However when I input values over 10 in both fields (e.g. 50), I am only getting one validation error instead of two.

What could be wrong?

     function calc() {
    var x, y, z, text1, text2;   
    // Get the value of the input field with id="numb"
       x = Number(document.getElementById("val01").value);
       y = Number(document.getElementById("val02").value);

       // If x is Not a Number or less than one or greater than 10
       if (isNaN(x) || x < 0 || x > 10) {
         text1 = "Input not valid";
         document.getElementById("validation1").innerHTML = text1;
       } else if (isNaN(y) || y < 0 || y > 10) {
         text2 = "Input not valid";
         document.getElementById("validation2").innerHTML = text2;
       } else {
         z = x + y;
         document.getElementById("total").innerHTML = z;
       }

     }
  
    
    <p>Please input a number between 0 and 10:</p>
    
    1st number:<input id="val01" required> <b id="validation1"></b> <br> 
    2nd Number:<input id="val02" required> <b id="validation2"></b> <br>

    <button onclick="calc()">click</button><br /> sum = <span id="total">0</span>
   
NobodyNada
  • 7,529
  • 6
  • 44
  • 51

4 Answers4

1

You could use a flag and check it for the calculation.

Skip the else parts and use the flag instead.

var ok = true;
if (isNaN(x) || x < 0 || x > 10) {
   ok = false;
   text1 = "Input not valid";
   document.getElementById("validation1").innerHTML = text1;
}
if (isNaN(y) || y < 0 || y > 10) {
   ok = false;
   text2 = "Input not valid";
   document.getElementById("validation2").innerHTML = text2;
} 
if (ok) {
    z = x + y;
    document.getElementById("total").innerHTML = z;
}
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
0

If your first validation fails (if (...)), you do not execute the second validation (else if (...)) anymore.

Instead, run the validations separately from each other and only do the calculation if both succeed, e.g.:

function calc() {
    var x, y, z, text1, text2;
    // Get the value of the input field with id="numb"
    x = Number(document.getElementById("val01").value);
    y = Number(document.getElementById("val02").value);

    var valid = true;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 0 || x > 10) {
        text1 = "Input not valid";
        document.getElementById("validation1").innerHTML = text1;
        valid = false;
    }

    if (isNaN(y) || y < 0 || y > 10) {
        text2 = "Input not valid";
        document.getElementById("validation2").innerHTML = text2;
        valid = false;
    }

    if(valid) {
        z = x + y;
        document.getElementById("total").innerHTML = z;
    }

}
TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
0

You only get one validation because of the way your logic inside the if else statement is built.

You only go "inside" one of the three statements, because you're using if else if, when you need to go inside multiple ones, you can just use a sequence of if()

<script>
function calc() {
var x, y, z, text1, text2;   
// Get the value of the input field with id="numb"
   x = Number(document.getElementById("val01").value);
   y = Number(document.getElementById("val02").value);

   var invalidX = true;
   var invalidY = true;

   // If x is Not a Number or less than one or greater than 10
   if (isNaN(x) || x < 0 || x > 10) {
     invalidX = false;
     text1 = "Input not valid";
     document.getElementById("validation1").innerHTML = text1;
   }
   if (isNaN(y) || y < 0 || y > 10) {
     invalidY = false;
     text2 = "Input not valid";
     document.getElementById("validation2").innerHTML = text2;
   } 
   if (invalidX && invalidY) {
     z = x + y;
     document.getElementById("total").innerHTML = z;
   }

 }
</script>

Hope that is what you were looking for. Notice that I also included two variables with booleans that control if the input is valid.

leofontes
  • 898
  • 4
  • 16
  • 40
0

Remove the else if condition in your code for the second valida ation that u are doing.

Swetha
  • 457
  • 4
  • 7