Javascript innerHTML自动覆盖作废

Question

我只是在练习 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>

我不明白为什么，但它在这个片段中有效，但现在在我的浏览器中。我正在使用 Macbook Air。我在 Safari 和 Chrome 上都试过运行。任何帮助将不胜感激。

Answer 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>

Answer 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 is automatically overwritten and nullified

html

javascript

forms

function

innerhtml