Javascript show message if total=x

Question

HTML/Java noobie here so please bear with me. I have multiple quantity selectors on a page and then a javascript that takes the sum of all of the values.

<label for="quantity">Option 1: </label>
<input class="product-selector-field" onblur="findTotal()" min="0" type="number" id="quantity1" name="quantity" value="0" />
<br><br>      

<label for="quantity">Option 2: </label>
<input class="product-selector-field" onblur="findTotal()" min="0" type="number" id="quantity2" name="quantity" value="0" />
<br><br>

Total Selected : <input type="text" name="total" id="total" readonly = true/>

<script type="text/javascript">
function findTotal(){
  var arr = document.getElementsByName('quantity');
  var tot=0;

  for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
      tot += parseInt(arr[i].value);
  }
  document.getElementById('total').value = tot;
}
</script>       

I'm trying to figure out how to display an error message if the sum is not equal to 15.

I've tried adding this to the script but I haven't had any success...

<span id="errorMessage">Error</span>

If (tot!=15) {
  document.getElementById('errorMessage').removeClass("hide")
} else {    
  document.getElementByID.addClass
}

This code is on a separate CSS file:

  .hide {
        display: none !important;
  }

Does anyone know what I may be doing wrong?

Answer 1

1. You should use oninput instead of onblur , it's better
2. You should use isNaN to check if a value is valid number or not. (keep in mind if(0) is false ) so 0 s will be excluded even if they're valid numbers)
3. The error message should be hidden initialy (having the class hidden at start). Depending on what you need of course, my opinion is it should be hidden.
4. DOM elements don't have such function as .removeClass or .addClass (those are jQuery's). Use .classList.add and .classList.remove or .className = instead!

 #errorMessage { color: red; } .hidden { display: none; }

 <label for="quantity">Option 1:</label> <input class="product-selector-field" oninput="findTotal()" min="0" type="number" id="quantity1" name="quantity" value="0" /> <br> <br> <label for="quantity">Option 2:</label> <input class="product-selector-field" oninput="findTotal()" min="0" type="number" id="quantity2" name="quantity" value="0" /> <br> <br>Total Selected : <input type="text" name="total" id="total" readonly=true/> <span id="errorMessage" class="hidden">Error</span> <script type="text/javascript"> function findTotal() { var arr = document.getElementsByName('quantity'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (!isNaN(arr[i].value)) // use isNaN to check if it is a valid number or not (because if(0) is false so 0 will be excluded) tot += parseInt(arr[i].value); } document.getElementById('total').value = tot; var errorElement = document.getElementById("errorMessage"); if (tot !== 15) errorElement.classList.remove('hidden'); else errorElement.classList.add('hidden'); } </script>