getElementByID().innerHTML never works for me

Question

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>

It's working, but as you're using an `` button without stopping its default behavior (submitting the form) the page is reloaded (because of the missing `action` attribute) - with an empty paragraph `a` — Andreas, Jan 23 '16 at 17:08

score 2 · Answer 1 · answered Jan 23 '16 at 17:09

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>

Or simply change the type of the button `` – Andreas Jan 23 '16 at 17:10 — Andreas, Jan 23 '16 at 17:10

score 1 · Accepted Answer · answered Jan 23 '16 at 17:19

1

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

answered Jan 23 '16 at 17:19

Akshay Kumar

519
4
17

simplest solution usually the best! this solved my problem, I'm sure the others would have as well but this was the simplest, AMAZING response times from everyone tho, thanks! – bodovix Jan 23 '16 at 17:47

score 0 · Answer 3 · answered Jan 23 '16 at 17:08

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.

score 0 · Answer 4 · answered Jan 23 '16 at 17:10

0

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;" >

answered Jan 23 '16 at 17:10

YounesM

2,111
11
27

score -1 · Answer 5 · answered Jan 23 '16 at 17:16

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>

"_Refer the corrected code..._" The script will also work in the `
` of the page. "_...but you need to put some delay time otherwise it just flash..._" That's the actual problem - but a delay won't do anything useful here. — Andreas, Jan 23 '16 at 17:20

getElementByID().innerHTML never works for me

5 Answers5