html - Changing div content with Javascript onClick - Stack Overflow

admin管理员组

文章数量:1305160

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 } 

<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 } 

<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>

But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?

• javascript
• html
• forms
• getelementbyid

Share Improve this question Follow edited Apr 30, 2015 at 19:32 Barmar 783k5656 gold badges546546 silver badges660660 bronze badges asked Apr 30, 2015 at 19:29 BenckBenck 54511 gold badge55 silver badges1919 bronze badges 5

• The snippet works as expected. What browser(s) have you tested? – kgh Commented Apr 30, 2015 at 19:32
• 2 If you're not altering the HTML of the div, use textContent over innerHTML. Also, you should use external event handling instead of inline. – Sterling Archer Commented Apr 30, 2015 at 19:32
• 1 You're not doing anything to stop the form from being submitted. return false? – j08691 Commented Apr 30, 2015 at 19:33
• 1 you can also change the type from submit to button to prevent submission – Gavin Commented Apr 30, 2015 at 19:34
• I added the jQuery tag in case there's a better way with jQuery. I'm testing it in Chrome. I changed it from submit to button and now it's working. It was reloading the page right away and I wasn't noticing. Thanks! – Benck Commented Apr 30, 2015 at 19:38

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work

<input type="button"name="button" id="button" onclick="myfunction()" /> 

The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
    return false;
 } 

Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.

Call event.preventDefault() to prevent the normal form submission.

function myfunction(e) { 
    e.preventDefault();
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 } 

<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>

本文标签： htmlChanging div content with Javascript onClickStack Overflow