JavaScript not working when using innerHTML

Question

What is wrong with below code? I've added a button. And on the button's onclick event, I'm calling the script to change the value of p tag.

In the script, I'm trying to set the value od p tag using its ID attribute.

But nothing is changing if I click on the button.

Tested in different browsers, still no result.

Here is the code:

<HTML>
<BODY>
<INPUT TYPE="BUTTON" onclick="changeValue()" VALUE="Change Value" />
<P ID="demo">Initial Value</P>
<SCRIPT>
function changeValue() {
  document.getElementByID("demo").innerHTML="Value Changed"
}
</SCRIPT>
</BODY>
</HTML>

Also, you should be able to look in the browser debug console and see a script error reported there to give you a clue as to what's wrong. That's how you find errors on your own. — jfriend00
– jfriend00, Commented Jun 22, 2014 at 1:27

Gokul Nath KP · Accepted Answer · 2014-06-22 01:21:34Z

4

It is getElementById with a lower case "d".

getElementById()

Note: JavaScript is case sensitive.

answered Jun 22, 2014 at 1:21

Gokul Nath KP

15.6k25 gold badges94 silver badges131 bronze badges

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

Comments

imbondbaby · Accepted Answer · 2014-06-22 01:22:17Z

1

function changeValue() {
  document.getElementById("demo").innerHTML="Value Changed";
}

You have the "d" in ID capitalized and add a ";" at the end and try it :)

answered Jun 22, 2014 at 1:22

imbondbaby

6,4313 gold badges23 silver badges54 bronze badges

Comments

blizzrdof77 · Accepted Answer · 2014-06-22 01:45:06Z

All of these answers give you the answer to your question - the problem with your code is the "getElementByID" function should be "getElementById", as JavaScript (like almost every programming and scripting language) is case sensitive. And technically, you should include a semicolon, but it will still work in this case without it.

Replace the element with the following (as @user3739658 provided):

 function changeValue() {
   document.getElementById("demo").innerHTML="Value Changed";
 }

Then of course you would need to call that function:

changeValue();

If you want to make it a dynamic function, pass these parameters:

 function changeValue(id, newValue) {
   document.getElementById(id).innerHTML=newValue;
 }

Then you could call it like this:

 <script>
   changeValue('element-id','This is the new value'); 
 </script>

Collectives™ on Stack Overflow

JavaScript not working when using innerHTML

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