how to sum two elements in javaScript

Question

this is my first JavaScript program and I hit my first road block. can anyone tell me where am I doing wrong. I want to get the sum of first two boxes on third box after clicking the button

 <!DOCTYPE html>
   <html>
   <body>

   <h1>My First JavaScript</h1>

   <p>Please input a number.</p>



   <script>
   function myFunction()
   {
    var x=document.getElementById("demo").value;
    var y=document.getElementById("demo1").value;
    var z=parseInt(x)+parseInt(y);

     document.getElementById("demo2").value=Z;
   }
  </script>

   <input id="demo" type="text">
   <input id="demo1" type="text">
   <input id="demo2" type="text" value="">

   <button type="button" onclick="myFunction()">Click Me!</button>

Probably the biggest thing you're doing wrong is not checking the console in your browser's developer tools. That should be the first thing. If you've never done that, I'd recommend finding the developer tools so you can see your error messages. — cookie monster
– cookie monster, Commented Jan 23, 2014 at 19:41

Matt · Accepted Answer · 2014-01-23 19:37:59Z

7

JavaScript is case-sensitive:

document.getElementById("demo2").value=Z; // <-- Change to lower-case z

answered Jan 23, 2014 at 19:37

Matt

20.8k1 gold badge61 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suman Bogati · Accepted Answer · 2014-01-23 19:39:23Z

3

try this, you are putting Z instead of z as result.

 <!DOCTYPE html>
   <html>
   <body>

   <h1>My First JavaScript</h1>

   <p>Please input a number.</p>



   <script>
   function myFunction()
   {
    var x=document.getElementById("demo").value;
    var y=document.getElementById("demo1").value;
    var z=parseInt(x)+parseInt(y);

     document.getElementById("demo2").value=z;
   }
  </script>

   <input id="demo" type="text">
   <input id="demo1" type="text">
   <input id="demo2" type="text" value="">

   <button type="button" onclick="myFunction()">Click Me!</button>

answered Jan 23, 2014 at 19:39

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Comments

Jason M. Batchelor · Accepted Answer · 2014-01-23 19:53:44Z

Also, in addition to the case-sensitivity issue that others have called out, your code is prone to another issue. It's always a good idea to test that you have a valid reference to an object before you attempt to call a method on that object:

function myFunction() {
    // First, get a reference to the form fields
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    // next, test to see if the reference exists with an if construct ...
    var x = 0;
    if(demo !== null){
        x = parseInt(demo.value, 10);
    }
    // you could also use a ternary operator, like this, to do the same thing but 
    // with slightly more compact code...
    var y = (demo1 !== null) ? parseInt(demo1.value, 10) : 0;
    var z = x + y;

    document.getElementById("demo2").value = z;
}

Lastly, as a matter of small import, it's best not to use single-letter variable names in general practice. It's not bad for learning early-on, but getting into the habit of making variable names relevant and understandable will help you a lot in the long run.

Good luck and welcome to the wide world of Javascripting!

Collectives™ on Stack Overflow

how to sum two elements in javaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related