Using .innerHTML from an onClick function

Question

I am having trouble using .innerHTML within a javascript function called by clicking a button. For a brief flickering second I can see that the function is called, and the text changed, but then the text reverts.

<html>
<head>
</head>

<body>

<form>
     <input type="submit" value="Change the Text" onClick="change()">
</form>

<div id="ToBeChanged"> Hello, World </div>

<script>
 function change(){
     document.getElementById("ToBeChanged").innerHTML = "New Text"; 
 };
</script>

</body>
</html>

Of course, if I just use the .innerHTML outside of a function, it changes the text without any problems and does not revert to the old text. Is there a way to use .innerHTML to change text from the the onClick function? Or is there another way I should be accomplishing this task?

What's wrong with the code you show?

jfriend00
– jfriend00

2015-05-01 02:02:32 +00:00
Commented May 1, 2015 at 2:02 — jfriend00
– jfriend00, Commented May 1, 2015 at 2:02
works fine here jsfiddle.net/mjc6fq97/2

Abdul Ahmad
– Abdul Ahmad

2015-05-01 02:02:36 +00:00
Commented May 1, 2015 at 2:02 — Abdul Ahmad
– Abdul Ahmad, Commented May 1, 2015 at 2:02

Icarus · Accepted Answer · 2015-05-01 02:04:51Z

3

The text reverts back because you have an input type=submit which basically is calling the javascript function and then submitting the form, which reloads the page.

You need to prevent the submission of the form. Something like:

onClick="change(); return false;"

However, perhaps your button shouldn't be type submit to begin with...

answered May 1, 2015 at 2:04

Icarus

64k14 gold badges102 silver badges116 bronze badges

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

1 Comment

RMoore Over a year ago

Ah, I understand! Thanks. I don't actually need the form to submit at this point, so just switching the type to "button" was all that was needed.

jfriend00 · Accepted Answer · 2015-05-01 02:04:40Z

2

Oftentimes, when someone says that code in a submit button event handler does not work, the issue is that the button is causing the page to be reloaded, thus making you think that your code isn't working. In fact, your code is probably working, but then the page reloads immediately so you never see the code's effect.

If that is indeed what is happening, you can prevent the page reload by changing your button to a regular button (not a submit button).

<input type="button" value="Change the Text" onClick="change()">

You could also leave the button as a submit button and prevent the default behavior for the button, but if you don't intend to submit a form, then better to just stop making it a submit button in the first place and just make it a regular button.

answered May 1, 2015 at 2:04

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

RMoore Over a year ago

Thanks -- yes, this all that was required. Changing it from a "submit" to a "button" type fixed the problem.

Collectives™ on Stack Overflow

Using .innerHTML from an onClick function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related