Question

我有一个html文件：

    <!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" type="text/css" href="C:\Users\matthew\AppData\Local\Temp\fz3temp-1\email picker.css"> 
<script src="email picker.js" type="text/javascript"></script>

</head>
<body>
    <div id="main">

        <form>
        <h4>Enter the email addresses in the input box below</h4>
            email:<input id="emailIn" type="text" placeholder=" email" />
            <input type="submit" value="Show entry" onsubmit="insert()" />
        </form>

        <div id="display"></div>
    </div>

</body>
</html>

和一个javascript文件：

    var entries = [];
    var emailInput = document.getElementById("emailIn");
    var messageBox = document.getElementById("display");

    function insert() {
        entries.push(emailInput.value);
        clearAndShow();
    };

    function clearAndShow() {

    emailInput.value = "";
    messageBox.innerHTML = "";

      messageBox.innerHTML += "Emails: " + entries.join(", ") + "<br/>";
    };

和一个简单的.css文件。

当我在浏览器中运行代码时，最后的电子邮件输入不会显示。我错过了什么？非常感谢任何帮助。

Answer 1

您的问题是您提交了表单，因此页面被重置（并且您无法绑定insert函数，因为输入未收到submit事件。

您可以替换

        <input type="submit" value="Show entry" onsubmit="insert()" />

与

        <input type="button" value="Show entry" onclick="insert()" />

为什么添加的电子邮件地址不会显示在messageBox中？

1 个答案: