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>
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>
Share Improve this question edited Jan 23, 2014 at 19:38 BackSlash 22.3k25 gold badges102 silver badges141 bronze badges asked Jan 23, 2014 at 19:37 WannaBeCoderWannaBeCoder 1,2822 gold badges17 silver badges41 bronze badges 2
- 2 javascript is not the same as java! – BackSlash Commented Jan 23, 2014 at 19:38
- 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 remend finding the developer tools so you can see your error messages. – cookie monster Commented Jan 23, 2014 at 19:41
3 Answers
Reset to default 7JavaScript is case-sensitive:
document.getElementById("demo2").value=Z; // <-- Change to lower-case z
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>
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 pact 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 wele to the wide world of Javascripting!