简单的HTML表单与javascript函数

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;离开页面。到

Answer 2

正如评论所说，只是改变你的email变量：

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

然后只需将其推送到你的emailArray

编辑

你需要重新命名的ID你标签。它目前不工作的原因是因为返回的值是第一个元素id的电子邮件（这是您的标签，未定义）。

这里有一个Fiddle

Answer 3

我会提出了两种改进代码：

1. 把你的JavaScript <form>元素之后，以确保DOM元素在文档中存在

2. 使用addEventListener方法附加点击处理程序。阅读更多here。

   电子邮件：
   变种emailArray = [];函数注册（）{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）;

Answer 4

给出的问题是表单名称是“注册”和函数是“注册（）”，然后该函数从未执行（这在this answer更好地解释）。如果您更改表单名称或函数名称，则所有内容都应按预期工作。

Answer 5

请重命名您的函数名（注册）或表单名称（注册），

因为当你尝试访问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 6

事件处理函数（在onclick属性的代码结束试试这个代码：

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