CODEWITHSUNDEEP
javascripthtml
bodovix
bodovix

Reputation: 349

getElementByID().innerHTML never works for me

I just can't seem to get my head around how document.getElementById("").innerHTML alert("") works - so the function is fine.

In every college exercise I've done so far, I've tried to use getElement...innerHTML since I feel it's a more useful way of doing things than alert/document.write, and... it never works, ever.

Am I missing some key rules about it?

Here is a very 'early-days' example that didn't work:

<html>
<head>
<title>total of 3</title>
<script language="javascript">
    function total()
    {
        var number1 = 0;
        var number2 = 0;
        var number3 = 0;
        var total = 0;

        number1 = parseInt(document.m.number1.value);
        number2 = parseInt(document.m.number2.value);
        number3 = parseInt(document.m.number3.value);
        total = number1 + number2 + number3;

        alert("your total is " + total);
        document.getElementById("a").innerHTML = total;

    }
</script>

</head>

<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr>
<tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>
</tr>
<tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
</form>
<p id="a"></p>
</body>
</html>

Upvotes: 1

Views: 114

Answers (5)

Akshay Kumar
Akshay Kumar

Reputation: 549

Change you input type from submit to input type button.....

<td><input type="button" name="Submit" id="Submit" value="Submit" onClick="total()"></td>

because using submit you are refreshing your page, so you cant see your result..

AND using button page will not refresh and you will get your result :p

Upvotes: 1

Angad Gupta
Angad Gupta

Reputation: 1

Refer the corrected code , here its working but you need to put some delay time otherwise it just flash once a while

<html>
<head>
<title>total of 3</title>


</head>

<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr><tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>

</tr><tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
<p id="a"></p>
</form>
<script >

function total()
    {

var number1=0;
var number2=0;
var number3=0;
var total=0;

    number1=parseInt(document.m.number1.value);
    number2=parseInt(document.m.number2.value);
    number3=parseInt(document.m.number3.value);
    total=number1+number2+number3;
alert("your total is "+total);

document.getElementById("a").innerHTML = total;

    }


</script>

</body>
</html>

Upvotes: -1

YounesM
YounesM

Reputation: 2317

Your code is working, it doesn't change the the inner HTML because the submitbutton refreshes the page. Try :

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total();return false;" >

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

This is happening because you are using a submit button, and so your form submits and causes the page to change(or reload in this case since you have no action).

Because it reloads you have lost whatever you have changed. You can use preventDefault to stop the default action of an event, in this instance prevent the form submission.

Since you are using inline js you will have to pass the event object to your total function and then call preventDefault() on it.

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total(event)">

And then in your JS

function total(event){
  event.preventDefault();
  //...rest of your code
}

Demo

function total(event){
  event.preventDefault();
  var number1=0;
  var number2=0;
  var number3=0;
  var total=0;

  number1=parseInt(document.m.number1.value);
  number2=parseInt(document.m.number2.value);
  number3=parseInt(document.m.number3.value);
  total=number1+number2+number3;

  alert("your total is "+total);
  document.getElementById("a").innerHTML= total;

}
<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr><tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>

</tr><tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" id="Submit" name="submit" value="Submit" onClick="total(event)"></td>
</tr>
</table>
</form>
<p id="a"></p>

Upvotes: 2

Matt McDonald
Matt McDonald

Reputation: 5050

This is because you're submitting a form, so when you are clicking the button it's refreshing the page and thus not running the part of your script that writes to the page.

The alert pauses execution of the script (and pauses refreshing) which is why the alert part works.

To prevent the form from refreshing the page you should preventDefault on the submit event.

So, for your total function:

function total()
{

    var number1=0;
    var number2=0;
    var number3=0;
    var total=0;

    number1=parseInt(document.m.number1.value);
    number2=parseInt(document.m.number2.value);
    number3=parseInt(document.m.number3.value);
    total=number1+number2+number3;

    alert("your total is "+total);
    document.getElementById("a").innerHTML= total;
    event.preventDefault();

}

Although this should work fine in Chrome, some browsers may need you to pass the event along with the function. So send it as an argument to your total function.

Upvotes: 0

Related Questions