使用Javascript onClick更改div内容

问题描述

我正在尝试使用文本框和提交按钮来更改页面上的div.我想将已在文本框中键入的文本放在单击按钮时放入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>

但是什么也没发生.当我在浏览器中尝试时，它只会刷新页面并将?textbox=someValueHere添加到URL的末尾.如何获取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?

推荐答案

问题是提交"按钮正在发布表单，因此您看不到更改-如果将提交"按钮更改为普通按钮，它将起作用

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()" />

这篇关于使用Javascript onClick更改div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！