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

你有两个问题。

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

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

Answer 2

请重命名您的功能名称（注册）或表单名称（注册），

因为当您尝试访问document.signup......

时

它会产生类型错误，例如对象不是函数

尝试以下代码，

<script type="text/javascript">
        var emailArray = [];

    function signup() {
        var theForm = document.forms['signupForm'];
        if (!theForm) {
            theForm = document.signupForm;
        }
            var email = theForm.email.value;
            emailArray.push(email);         

            console.log(emailArray[0]);
        }
</script>


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

Answer 3

根据评论中的建议，只需将email变量更改为：

即可

var email = document.getElementById('email').value;

然后将其推送到emailArray

修改

您需要重命名标签的ID。它当前不起作用的原因是因为返回的值是第一个带有电子邮件的id元素的值（这是您的标签，并且未定义）。

这是Fiddle

Answer 4

给出的问题是表单名称是“注册”而函数是“signup（）”，那么函数永远不会执行（这在this answer中有更好的解释）。如果您更改了表单名称或功能名称，则一切都应按预期工作。

Answer 5

试试这段代码：

<form name="test">
    <label id="email" for="email" placeholder="Enter your email...">Email: </label>
    <input type="text" name="email" id="email" onBlur=/>
    <br />
    <input type="button" name="submit" id="submit" value="Signup" onclick="signup()"/>
</form>
<script type="text/javascript" charset="utf-8">
       var emailArray = [];
        function signup(){
            var email = document.getElementById('email').value;
            emailArray.push(email);
            alert('You have now stored your email address');
            window.open('http://google.com');
                    console.log(emailArray[0]);
            return false;
        }
</script>

Answer 6

我建议对您的代码进行两项改进：

将您的javascript放在<form>元素后面，以确保文档中存在dom元素
使用addEventListener方法附加点击处理程序。阅读更多here。
电子邮件：
var emailArray = []; function signup（）{var email = document.getElementById（'email'）。value; emailArray.push（电子邮件）;提醒（'您现在已存储了您的电子邮件地址'）; window.open（ 'http://google.com'）;的console.log（emailArray [0]）;返回false; } document.getElementById（“submit”）。addEventHandler（'click'，signup，false）;

带有javascript函数的简单HTML表单

6 个答案: