Question

<!DOCTYPE html>
<html>
<HEAD>
    <meta charset="utf-8" />
<script language= "javascript">
    var array1 = new Array();
        function display1()
            {
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0]=input1;
            guest_input[1]=input2;
            guest_input[2]=input3;
            for (var i=0; i<array1.length; i++) 
                {
                document.write("<ul><li>" +array1[i]+ "</li></ul>");
                }
            }
    </script>
</HEAD>
<BODY>
<form name="form1">
    Type in msg 1 : <input type="text" name="msg1"><br>
    Type in msg 2 : <input type="text" name="msg2"><br>
    Type in msg 3 : <input type="text" name="msg3"><br>
</form>
<input type="button" value="Go!" name="button1" onclick="display1()">
</BODY>

这是非常简单，非常基本的代码。我只想在我做更多工作之前让这件作品工作。

我只是希望在单击按钮后，无序列表显示在表单下方，但为什么页面在单击按钮时刷新/擦除表单？将其更改为

  onclick="display1(); return false;"

无法解决问题。谢谢！

Answer 1

你需要将列表附加到表单，给你的表单一个id并使用jquery来附加它

<form name="form1" id="fo">
    Type in msg 1 : <input type="text" name="msg1"><br>
    Type in msg 2 : <input type="text" name="msg2"><br>
    Type in msg 3 : <input type="text" name="msg3"><br>
</form>

你的jquery

$('#fo').append("<ul><li>" +array1[i]+ "</li></ul>")

Answer 2

这是浏览器的默认功能，它会在提交表单数据并刷新页面时发送表单数据。使用event.preventDefault()停止刷新：

HTML

<input type="button" value="Go!" name="button1" onclick="display1(event)">

JS

function display1(event)
{
  event.preventDefault();
  // do rest of the stuff here
}

阅读本文：event.preventDefault | MDN

Answer 3

使用“appendChild”而不是“write”，因为您覆盖了HTML：

document.getElementsByTagName('body')[0].appendChild("<ul><li>" +array1[i]+ "</li></ul>");

Answer 4

尝试将 e.preventDefault(); 放在函数的开头，而不是标记中。或者您也可以return false。

<script language= "javascript">
    var array1 = new Array();
        function display1(e)
            {
            e.preventDefault();
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0]=input1;
            guest_input[1]=input2;
            guest_input[2]=input3;
            for (var i=0; i<array1.length; i++) 
                {
                document.write("<ul><li>" +array1[i]+ "</li></ul>");
                }
               // you could also **return false;** here
            }

    </script>

Answer 5

它因为document.write，它覆盖了文档的所有内容，你可以通过查看页面源看到。

添加div之类的容器元素并为其分配标记，请参阅下面的修改后的代码。

 <!DOCTYPE html>
    <html>
    <HEAD>
        <meta charset="utf-8" />
    <script type="text/javascript" language= "javascript">
        var array1 = new Array();
        function display1() {
            var guest_input = array1;
            var input1;
            var input2;
            var input3;
            input1 = document.form1.msg1.value;
            input2 = document.form1.msg2.value;
            input3 = document.form1.msg3.value;
            guest_input[0] = input1;
            guest_input[1] = input2;
            guest_input[2] = input3;
            var xx="";
            for (var i = 0; i < array1.length; i++) {
                xx = xx + "<ul><li>" + array1[i] + "</li></ul>";
            }
            document.getElementById("listcontainer").innerHTML=xx;
            return false;
        }
        </script>
    </HEAD>
    <BODY>
    <form name="form1">
        Type in msg 1 : <input type="text" name="msg1"><br>
        Type in msg 2 : <input type="text" name="msg2"><br>
        Type in msg 3 : <input type="text" name="msg3"><br>
        <input type="button" value="Go!" name="button1" onclick="return display1();">
    </form>
        <div id="listcontainer"></div>
    </BODY>
     </html>

Javascript - 如何阻止onClick擦除表单/刷新页面？

5 个答案: