In Javascript if else statement, only if is executed even if its not true

Question

i am trying to make this code run. In the function GradeCal(), Only the if statement is executed even if the condition is not true. For some reason the else is not being executed. Dont know what I am doing wrong. P.S I am a beginner in JS. Here is my code

<html>

<head>
  <title>It430
  </title>
</head>

<body>
  <center>
    <h2>Grade Book Calculator</h2>
    <h4> Welcome to Grade Book Calculator </h4>
    <form id="my form">
      <table>
        <tr>
          <td>Student ID:</td>
          <td> <input id="studentid" value="bc180200783" oninvalid="alert(Please Enter Student ID)" type="text" place holder="Enter your VU ID" required="required" /></td>
        </tr>
        <tr>
          <td>Name:</td>
          <td> <input id="nameid" value="Hina" oninvalid="alert(Please Enter Name)" type="text" required="required" /></td>
        </tr>
        <tr>
          <td>Father Name:</td>
          <td> <input id="fathernameid" value="Zafar" oninvalid="alert(Please Enter Father Name)" type="text" required="required" /></td>
        </tr>
        <tr>
          <td>CNIC:</td>
          <td> <input id="cnicid" pattern="^[0-9+][5]-[0-9+][7]-[0-9][1]$" value="33100-1100321-5" oninvalid="alert(Please Enter CNIC)" required="required" /></td>
        </tr>
        <tr>
          <td>English:</td>
          <td> <input id="englishid" oninvalid="alert(Please Enter English Marks)" name="english" required="required" /></td>
        </tr>
        <tr>
          <td>Math:</td>
          <td> <input id="mathid" oninvalid="alert(Please Enter Math Marks)" name="math" required="required" /></td>
        </tr>
        <tr>
          <td>Computer:</td>
          <td> <input id="computerid" oninvalid="alert(Please Enter Computer Marks)" name="computer" required="required" /></td>
        </tr>
        <tr>
          <td>Average Marks:</td>
          <td> <output type="number" id="markid"> </output>
          </td>
        </tr>


        <tr>
          <td> <button type="button" onClick="GradeCal()"> Grade Book </button>
            <button type="reset"> Reset</button></td>
        </tr>
      </table>
    </form>
  </center>
  <script>
    function GradeCal() {
      var field1 = document.getElementById("englishid");
      var field2 = document.getElementById("mathid");
      var field3 = document.getElementById("computerid");
      var result;

      if (field1 || field2 || field3 === NULL) {
        alert("Please enter number");
      } else {
        result = (parseFloat(field1) + parseFloat(field2) + parseFloat(field3)) / 3;
        document.getElementById("markid").innerHTML = +result;
      }
    }
  </script>

</body>

</html>

`(field1 || field2 || field3 === NULL)` doesn't check if any one of them === NULL ... for one thing, `NULL` is not defined (did you mean `null`) and another it's `if (filed1 === null || field2 === null || field3 === null)` ... because `||` doesn't work like you think — Jaromanda X, Dec 03 '19 at 07:38
And `field1` is the element, not the value in it. So, it will never be null — adiga, Dec 03 '19 at 07:40
what are you trying to do ? That statement will always be true if one of the elements exists or the last one is NULL — angel.bonev, Dec 03 '19 at 07:44
i want that if any of the field is empty, it should display an alert Please enter number — noora, Dec 03 '19 at 08:06
`if (field1 || field2 || field3 === NULL)` => `if (!field1 || !field2 || !field3)` — kevinSpaceyIsKeyserSöze, Dec 03 '19 at 10:41

SomeDutchGuy · Answer 1 · 2019-12-03T11:19:06.127

You are not accessing the value of the elements. You should change your code to include extracting the values from the HTML elements. Like so:

var field1 = document.getElementById("englishid").value;
var field2 = document.getElementById("mathid").value;
var field3 = document.getElementById("computerid").value;

The .value will extract the value in the HTML tag.

You can also improve your if statement. The following might not be doing what you think it does:

if (field1 || field2 || field3 === NULL)

What actually happens here it that it say's: Is field1 set (not NULL, undefined, 0, NaN, "" or false) OR is field2 set (not NULL, undefined, 0, NaN, "" or false) OR is field3 NULL.

If you want to check if any of them is null you will need to do something like:

 if (field1 === NULL || field2 === NULL || field3 === NULL)

Or even better and more easy:

if (!field1 || !field2 || !field3)

The full function:

function GradeCal() {
      var field1 = document.getElementById("englishid").value;
      var field2 = document.getElementById("mathid").value;
      var field3 = document.getElementById("computerid").value;
      var result;

      if (!field1 || !field2 || !field3) {
        alert("Please enter number");
      } else {
        result = (field1 + field2 + field3) / 3;
        document.getElementById("markid").innerHTML = +result;
      }
    }

if use this, then it just executes the if statement and always displays the alert message, even if i have entered all the inputs. it doesnt calculate the average. — noora, Dec 03 '19 at 08:22
@kevinSpaceyIsKeyserSöze thanks for the input. I edited the post to include them. — SomeDutchGuy, Dec 03 '19 at 11:19

score 1 · Answer 2 · answered Dec 03 '19 at 07:51

your field vars are the elements you need to get the values of the fields to check the elements cannot be null

 var field1 = document.getElementById("englishid").value;
  var field2 = document.getElementById("mathid").value;
  var field3 = document.getElementById("computerid").value;

Professor Abronsius · Answer 3 · 2019-12-03T08:18:21.967

You could tweak that GradeCal function a little bit and make it more extensible simply by using an array for field names to be processed and some basic array methods.

function GradeCal(){

    let result=[];
    let fields=[ 'english', 'math', 'computer' ];
    let out=document.getElementById('markid');

    fields.forEach( ( id, i )=>{
        let field=document.querySelector( 'input[name="'+id+'"]' );
        if( field && !isNaN( field.value ) && field.value!='' )result.push( parseFloat( field.value ) );
        else alert( 'Please enter a number for '+id )
    });

    if( result.length === fields.length ) {
        out.innerHTML = result.reduce(( a,v )=>{ return a + v } ) / fields.length;
    } else {
        out.innerHTML='Error';
    }
}

function GradeCal(){

let result=[];
let fields=[ 'english', 'math', 'computer' ];
let out=document.getElementById('markid');

fields.forEach( ( id, i )=>{
 let field=document.querySelector( 'input[name="'+id+'"]' );
 if( field && !isNaN( field.value ) && field.value!='' )result.push( parseFloat( field.value ) );
 else alert( 'Please enter a number for '+id )
});

if( result.length === fields.length ) {
 out.innerHTML = result.reduce(( a,v )=>{ return a + v } ) / fields.length;
} else {
 out.innerHTML='Error';
}
}

<h2>Grade Book Calculator</h2>
<h4> Welcome to Grade Book Calculator </h4>
<form id="my form">
  <table>
 <tr>
   <td>Student ID:</td>
   <td> <input id="studentid" value="bc180200783" oninvalid="alert(Please Enter Student ID)" type="text" place holder="Enter your VU ID" required="required" /></td>
 </tr>
 <tr>
   <td>Name:</td>
   <td> <input id="nameid" value="Hina" oninvalid="alert(Please Enter Name)" type="text" required="required" /></td>
 </tr>
 <tr>
   <td>Father Name:</td>
   <td> <input id="fathernameid" value="Zafar" oninvalid="alert(Please Enter Father Name)" type="text" required="required" /></td>
 </tr>
 <tr>
   <td>CNIC:</td>
   <td> <input id="cnicid" pattern="^[0-9+][5]-[0-9+][7]-[0-9][1]$" value="33100-1100321-5" oninvalid="alert(Please Enter CNIC)" required="required" /></td>
 </tr>
 <tr>
   <td>English:</td>
   <td> <input id="englishid" oninvalid="alert(Please Enter English Marks)" name="english" required="required" /></td>
 </tr>
 <tr>
   <td>Math:</td>
   <td> <input id="mathid" oninvalid="alert(Please Enter Math Marks)" name="math" required="required" /></td>
 </tr>
 <tr>
   <td>Computer:</td>
   <td> <input id="computerid" oninvalid="alert(Please Enter Computer Marks)" name="computer" required="required" /></td>
 </tr>
 <tr>
   <td>Average Marks:</td>
   <td> <output type="number" id="markid"> </output>
   </td>
 </tr>


 <tr>
   <td> <button type="button" onClick="GradeCal()"> Grade Book </button>
  <button type="reset"> Reset</button></td>
 </tr>
  </table>
</form>

Pushprajsinh Chudasama · Answer 4 · 2019-12-03T10:36:53.203

You can do something like the below code.

function GradeCal() {
  var field1 = document.getElementById("englishid").value;
  var field2 = document.getElementById("mathid").value;
  var field3 = document.getElementById("computerid").value;
  var result;

  if (field1 === NULL || field2 === NULL || field3 === NULL) {
    alert("Please enter number");
  } else {
    result = (parseFloat(field1) + parseFloat(field2) + parseFloat(field3)) / 3;
    document.getElementById("markid").innerHTML = +result;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>It430
  </title>
</head>

<body>
  <center>
    <h2>Grade Book Calculator</h2>
    <h4> Welcome to Grade Book Calculator </h4>
    <form id="my form">
      <table>
        <tr>
          <td>Student ID:</td>
          <td> <input id="studentid" value="bc180200783" oninvalid="alert(Please Enter Student ID)" type="text" place holder="Enter your VU ID" required="required" /></td>
        </tr>
        <tr>
          <td>Name:</td>
          <td> <input id="nameid" value="Hina" oninvalid="alert(Please Enter Name)" type="text" required="required" /></td>
        </tr>
        <tr>
          <td>Father Name:</td>
          <td> <input id="fathernameid" value="Zafar" oninvalid="alert(Please Enter Father Name)" type="text" required="required" /></td>
        </tr>
        <tr>
          <td>CNIC:</td>
          <td> <input id="cnicid" pattern="^[0-9+][5]-[0-9+][7]-[0-9][1]$" value="33100-1100321-5" oninvalid="alert(Please Enter CNIC)" required="required" /></td>
        </tr>
        <tr>
          <td>English:</td>
          <td> <input id="englishid" oninvalid="alert(Please Enter English Marks)" name="english" required="required" /></td>
        </tr>
        <tr>
          <td>Math:</td>
          <td> <input id="mathid" oninvalid="alert(Please Enter Math Marks)" name="math" required="required" /></td>
        </tr>
        <tr>
          <td>Computer:</td>
          <td> <input id="computerid" oninvalid="alert(Please Enter Computer Marks)" name="computer" required="required" /></td>
        </tr>
        <tr>
          <td>Average Marks:</td>
          <td> <output type="number" id="markid"> </output>
          </td>
        </tr>


        <tr>
          <td> <button type="button" onClick="GradeCal()"> Grade Book </button>
            <button type="reset"> Reset</button></td>
        </tr>
      </table>
    </form>
  </center>


</body>

</html>

You need to get the `value` from the input. (Also, if nothing is entered in the input, it will be an empty string and not `null`) — adiga, Dec 03 '19 at 07:44
@AkshayBande there is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures — SomeDutchGuy, Dec 03 '19 at 07:45
@RuudVerhoef Its `null` not `NULL` JS keywords are case sensitive. — Akshay Bande, Dec 03 '19 at 07:53
Answers that go like "You can try the below code" and the like are usually really bad answers, despite presenting working code, which here isn't even the case. `null` is **never** the value of an `input`. — connexo, Dec 03 '19 at 07:57
...and you've made it even worse. I strongly suggest you delete your answer. — connexo, Dec 03 '19 at 08:05
its not displaying the alert message if any of the field is empty — noora, Dec 03 '19 at 08:07
@noora it's displaying alert messages when a condition is true. — Pushprajsinh Chudasama, Dec 03 '19 at 09:32

In Javascript if else statement, only if is executed even if its not true

4 Answers4