javascript - 带有 JavaScript 函数的简单 HTML 表单

Question

我有一个 HTML 表单，我想与一些 JavaScript 进行交互:

...
<form name="signup">
    <label id="email" for="email" placeholder="Enter your email...">Email: </label>
    <input type="email" name="email" id="email" />
    <br />
    <input type="submit" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
...

我有一些 JavaScript，我想获取输入的电子邮件地址并将其存储在一个数组中(它当前与我的 HTML 内联，因此是脚本标记):

<script type="text/javascript" charset="utf-8">
        var emailArray = [];
        function signup(){
            var email = document.signup.email.value;
            emailArray.push(email);
            alert('You have now stored your email address');
            window.open('http://google.com');
                    console.log(emailArray[0]);
        }
</script>

我希望这个简单的脚本能够将电子邮件存储在 emailArray 中，但在整个执行过程中控制台保持为空。

这段代码有什么问题？

Answer 1

你有两个问题。

1. 您的表单名为 signup，您的全局函数名为 signup。该函数被对 HTML 表单元素节点的引用覆盖。
2. 您的提交按钮将提交表单，导致浏览器在 JS 完成后立即离开页面(丢弃所有存储的数据并可能删除控制台日志)

重命名该函数并将 return false; 添加到事件处理函数的末尾(onclick 属性中的代码。