Member Avatar for rotten69

Hi there,

Can anyone explain what is wrong with my code? I get an error message saying null value from innerHTML.

    <script type="text/javascript">


      var sub1 = document.getElementById("input1") ;
      var sub2 = document.getElementById("input2") ;
      var sub3 = document.getElementById("input3") ;
      var sub4 = document.getElementById("input4") ;
      var GPA  = (sub1+sub2+sub3+sub4)/4;
      var para =  document.getElementById("para");


       para.innerHTML = GPA;



      //document.writeln(s);

    </script>
</head>
<body>

   <form id="calculator"> 
   Subject 1 : <input type="text" id="input1" value="10" > <br/>
   Subject 2 : <input type="text" id="input2" value="20"> <br/>
   Subject 3 : <input type="text" id="input3" value="30"> <br/>
   Subject 4 : <input type="text" id="input4" value="40"> <br/>
   <input type="text" id="para" >   

   <input type="submit" value="Calculate">

    </form>
</body>
</html>
  • 2 Contributors
  • 7 Replies
  • 3K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rotten69
Member Avatar for ckchaudhary

var sub1 = document.getElementById("input1") ;

sub1 doesn't contain the value of 'input1', its a DOM object
so when you do

var GPA = (sub1+sub2+sub3+sub4)/4;

GPA doesn't contain the 'average value' of the four inputs, you are adding objects! which obviously will give you null or undefined (unless of course you do operator overloading or something, if that's there in javascript).
So that's the error.
you should try

var sub1 = document.getElementById("input1").innerHTML ;

Member Avatar for rotten69

I was thinking that way. The only thing that I thought about is sub1 gets the value from input1. But if it doesn't, I can force it to get the value by writing this line

var sub1 = document.getElementById("input1").value;

This still doesn't work and gives the same error message.

Member Avatar for rotten69

Thanks for the response and will try what you suggested in a sec and let you know..

Member Avatar for rotten69

This piece of code stops the error message but it doesn't do what I want to do..

 <script type="text/javascript">


     function calculate(){

      var sub1 = document.getElementById("input1").innerHTML;
      var sub2 = document.getElementById("input2").innerHTML;
      var sub3 = document.getElementById("input3").innerHTML ;
      var sub4 = document.getElementById("input4").innerHTML;
      var GPA  = ( (sub1+sub2+sub3+sub4)/4);      -------> the value is ZERO.  What exactly am I doing wrong?
      var para =  document.getElementById("para").innerHTML;


       return para.innerHTML = GPA;


     }



    </script>
</head>
<body>

   <form id="calculator"> 
   Subject 1 : <input type="text" id="input1" value="10" > <br/>
   Subject 2 : <input type="text" id="input2" value="20"> <br/>
   Subject 3 : <input type="text" id="input3" value="30"> <br/>
   Subject 4 : <input type="text" id="input4" value="40"> <br/>
   <p id="para" >  </p>  

   <input type="submit" value="Calculate" onClick="calculate();">

    </form>
</body>
</html>
Member Avatar for ckchaudhary

If you dont mind using jquery then check the below code.. its working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
     function calculate(){
      var sub1 = $("#input1").val();
      var sub2 = $("#input2").val();
      var sub3 = $("#input3").val();
      var sub4 = $("#input4").val();
      var GPA  = (sub1*1 + sub2*1 + sub3*1 + sub4*1)/4;
      $("#para").text(GPA);
      return false;
     }
    </script>
</head>
<body>

   <form id="calculator"> 
   Subject 1 : <input type="text" id="input1" value="10"/> <br/>
   Subject 2 : <input type="text" id="input2" value="20"/> <br/>
   Subject 3 : <input type="text" id="input3" value="30"/> <br/>
   Subject 4 : <input type="text" id="input4" value="40"/> <br/>
   <p id="para" ></p>  

   <input type="submit" value="Calculate" onClick="return calculate();">

    </form>
</body>
</html>

---------------------
ideally it should be (sub1+sub2+sub3+sub4)/4
but since there's no fixed data type in javascript many a times it takes numbers as string and appends them rather than adding..
(sub11 + sub21 + sub31 + sub41)/4 is a workaround :)

Member Avatar for rotten69

Nah, I don't want to use Jquery. I'd like to keep that code practice produced in javascript..

Member Avatar for rotten69 
 <script type="text/javascript">
     var sub1 = document.getElementById("input1").value ;
     var sub2 = document.getElementById("input2").value ;
     var sub3 = document.getElementById("input3").value ;
     var sub4 = document.getElementById("input4").value ;

     var GPA = (sub1*1 + sub2*1 + sub3*1 + sub4*1)/4;     **-----> Now, This line doesn't just add the number strings but it adds them up then divide them by 4**

     var para = document.getElementById("para");
     para.innerHTML = GPA;
     //document.writeln(s);
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.