Javascript innerHTML 被自动覆盖并失效[重复]
Posted
技术标签:
【中文标题】Javascript innerHTML 被自动覆盖并失效[重复]【英文标题】：Javascript innerHTML is automatically overwritten and nullified [duplicate] 【发布时间】：2021-09-27 17:54:33 【问题描述】：我只是在练习 html DOM 和表单，我写了一个简单的代码，我们从表单中获取值并将它们显示在
标记中：
<html>
<head>
<title>Return first</title>
</head>
<body>
<p id="demo">hi</p>
<form id="myForm" name="myForm" onsubmit="getFormvalue()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<script>
function getFormvalue()
var x = document.getElementById("myForm");
var text = "";
for (var i = 0; i < x.length; i++)
if (x.elements[i].value != 'Submit')
text += x.elements[i].value + " ";
document.getElementById("demo").innerHTML=text;
</script>
</body>
</html>
问题是，当我按下提交时，“hi”被“David Beckham”替换了一毫秒，然后又变成了“hi”。因此，通过连续按提交，我可以看到文本一次又一次地更改。
我不明白发生了什么，它正在工作，但它不工作。我在代码中看不到任何错误。可能是代码相关，或者浏览器相关，或者机器相关。
function getFormvalue()
var x = document.getElementById("myForm");
var text = "";
for (var i = 0; i < x.length; i++)
if (x.elements[i].value != 'Submit')
text += x.elements[i].value + " ";
document.getElementById("demo").innerHTML=text;
<html>
<head>
<title>Return first</title>
</head>
<body>
<p id="demo">hi</p>
<form id="myForm" name="myForm" onsubmit="getFormvalue()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>我不知道为什么，但它在这个 sn-p 中工作，但现在在我的浏览器中。我正在使用 Macbook Air。我尝试在 Safari 和 Chrome 上运行它。任何帮助将不胜感激。
【问题讨论】：
当表单提交时，它们会加载一个新页面（如果您没有action 属性，则加载相同的页面）...您可以在您的函数中使用onsubmit="return getFormvalue()" 和return false
这是因为您使用了输入类型提交，它会将表单发布到服务器。如果您想避免这种情况，请不要使用提交按钮或通过从 getFormValue() 返回值来阻止表单发布
在 getFormvalue() 函数中使用 event.preventDefault() 来防止页面重新加载。
@riorudo 仅当 OP 首先将 function getFormvalue() 更改为 function getFormvalue(event) 时才有效
【参考方案1】：
那是因为onsubmit它会提交表单并刷新表单。所以使用event.preventDefault停止默认行为
function getFormvalue(e)
e.preventDefault();
var x = document.getElementById("myForm");
var text = "";
for (var i = 0; i < x.length; i++)
if (x.elements[i].value != 'Submit')
text += x.elements[i].value + " ";
document.getElementById("demo").innerHTML = text;
<p id="demo">hi</p>
<form id="myForm" name="myForm" onsubmit="getFormvalue(event)">
First name: <input type="text" name="fname" value="David"><br> Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>【讨论】：
【参考方案2】：你需要防止表单提交
function getFormvalue()
var x = document.getElementById("myForm");
var text = "";
for (var i = 0; i < x.length; i++)
if (x.elements[i].value != 'Submit')
text += x.elements[i].value + " ";
document.getElementById("demo").innerHTML=text;
<html>
<head>
<title>Return first</title>
</head>
<body>
<p id="demo">hi</p>
<form id="myForm" name="myForm" onsubmit="event.preventDefault(); getFormvalue()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>【讨论】：
以上是关于Javascript innerHTML 被自动覆盖并失效[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Javascript - .innerHTML 更改自动关闭标签
如何获取被 javascript 覆盖的文本的 innerHTML
Javascript：文档 innerHTML 替换中断表单
javascript中的innerHTML是什么意思，怎么个用法？