使用 Javascript onClick 更改 div 内容
Changing div content with Javascript onClick
我正在尝试使用文本框和提交按钮来更改页面上的 div。我想获取已在文本框中键入的文本,并在单击按钮时将其放入 div 中。我有这个代码:
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 显示文本框值?
没有任何反应,因为正在提交表单。您需要防止默认操作发生,即表单提交。有关如何防止事件默认操作发生的更多详细信息,请参阅 MDN 中的 preventDefault()
或 return false
。
调用event.preventDefault()
阻止正常的表单提交。
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>
表单正在提交中。您需要通过添加 return false 来阻止它; (如果您正在使用 Jquery)或完全删除不需要的表格。
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
问题是提交按钮正在发布表单,因此您没有看到更改 - 如果您将提交按钮更改为普通按钮,它会起作用
<input type="button"name="button" id="button" onclick="myfunction()" />
我正在尝试使用文本框和提交按钮来更改页面上的 div。我想获取已在文本框中键入的文本,并在单击按钮时将其放入 div 中。我有这个代码:
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 显示文本框值?
没有任何反应,因为正在提交表单。您需要防止默认操作发生,即表单提交。有关如何防止事件默认操作发生的更多详细信息,请参阅 MDN 中的 preventDefault()
或 return false
。
调用event.preventDefault()
阻止正常的表单提交。
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>
表单正在提交中。您需要通过添加 return false 来阻止它; (如果您正在使用 Jquery)或完全删除不需要的表格。
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
问题是提交按钮正在发布表单,因此您没有看到更改 - 如果您将提交按钮更改为普通按钮,它会起作用
<input type="button"name="button" id="button" onclick="myfunction()" />