getElementById（）在第一个元素上返回null

问题描述：

以下代码是我的简单注册表单。问题是alert(elements[0].value)显示undefined而不是name（这是我的表单的第一个元素）的值。但是，如果我尝试执行alert(elements[1].value)，它将显示值name没有任何问题。有任何想法吗？getElementById（）在第一个元素上返回null

<html> 
    <body> 
     <form name="register" id="register" method="POST" action="this-file.php"> 
      <fieldset> 
       <legend><span style="color:red; font-size:20px"> 
         Register</span></legend><br> 

       <label for="firstname">First name<span style="color:red;">*</span></label> 
       <input type="text" name="firstname" id="firstname" placeholder="Peter" 
         autofocus required><br><br> 

       <label for="lastname">Last name<span style="color:red;">*</span></label> 
       <input type="text" name="lastname" id="lastname" placeholder="Parker" 
         required><br><br> 

       <label for="password">Password<span style="color:red;">*</span></label> 
       <input type="password" name="password" id="password" required><br><br> 

       <label for="favfood">Favorite food<span style="color:red;">*</span></label> 
       <select name="favfood" id="favfood" required> 
        <option value="" selected>(none)</option> 
        <option value="chicken">Chicken</option> 
        <option value="pizza">Pizza</option> 
        <option value="pasta">Pasta</option> 
        <option value="hamburger">Hamburger</option> 
        <option value="steak">Steak</option> 
       </select> 
       <p>Gender<span style="color:red;">*</span></p> 
       <ul> 
        <li> 
         <input type="radio" name="gender" id="male" value="male" required> 
         <label for="male">Male</label> 
        </li> 
        <li> 
         <input type="radio" name="gender" id="female" value="female" required> 
         <label for="female">Female</label> 
        </li> 
       </ul> 
      </fieldset><br> 
      <input type="submit" value="Register" name="register"> 
      <input type="reset" value="Clear form" name="clear"><br><br> 
     </form> 
     <script type="text/javascript"> 
      var form = document.getElementById('register'); 
      var elements = form.elements; 

      form.noValidate = true; 
      form.addEventListener('submit', function (event) { 
       alert(elements[0].value); //displays "undefined" -- why? 
       for (var i = 0; i < elements.length; i++) { 
        if (elements[i].hasAttribute("required")) { 
         if (!elements[i].checkValidity()) { 
          event.preventDefault(); 
          alert('Please, fill in every required field.'); 
          form.reset(); 
          elements[0].focus(); 
          break; 
         } 
        } 
       } 
      }, false); 
     </script> 
    </body> 
</html>

请勿使用'alert'进行调试。 'console.log（elements）'和[在浏览器的控制台中查找]（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers）到看看什么元素是'元素[0]'（这是字段集）。 – JJJ

@JJJ感谢您的建议。 – sgrontflix

答

的elements集合中的第一个元素是<fieldset>。它没有名称或价值。

（是的，我知道elements包含字段集并没有意义，但确实如此）。

测试theelement.tagName的值，看看您是否在处理输入/选择/文本区域之前尝试运行您的验证例程。

这听起来很奇怪，但它的工作原理。你说使用数字索引是一个不好的主意：那么你会建议在我的代码中更改什么？ – sgrontflix

@sgrontflix - 该评论参照n1kkou的建议，即使用'document.forms [0]'而不是'document.getElementById'。你使用的不是数字索引的ID，所以我不建议你改变它。 – Quentin

哦，好的。感谢您使用'tagName'进行测试的伟大建议。你真棒，男人！ – sgrontflix

getElementById（）在第一个元素上返回null

相关推荐