Javascript innerHTML 被自动覆盖并失效[重复]答案

【问题标题】：Javascript innerHTML is automatically overwritten and nullified [duplicate]Javascript innerHTML 被自动覆盖并失效[重复]
【发布时间】：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){ 时才有效

标签： javascript html forms function innerhtml

【解决方案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>

【讨论】：