最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using .innerHTML from an onClick function - Stack Overflow

programmeradmin4浏览0评论

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 acplishing this task?

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 acplishing this task?

Share Improve this question asked May 1, 2015 at 2:00 RMooreRMoore 1831 gold badge3 silver badges9 bronze badges 2
  • What's wrong with the code you show? – jfriend00 Commented May 1, 2015 at 2:02
  • 1 works fine here jsfiddle/mjc6fq97/2 – Abdul Ahmad Commented May 1, 2015 at 2:02
Add a ment  | 

2 Answers 2

Reset to default 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...

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.

发布评论