Javascript getElementById（）在第一个元素上返回null
下面的代码是我的简单注册表。问题是Javascript getElementById（）在第一个元素上返回null,javascript,html,getelementbyid,Javascript,Html,Getelementbyid,下面的代码是我的简单注册表。问题是警报（元素[0].value）显示未定义的，而不是名称的值（这是我表单的第一个元素）。但是，如果我尝试执行alert（elements[1].value），它会毫无问题地显示name的值。有什么想法吗 <html> <body> <form name="register" id="register" method="POST" action="this-file.php"> &l
警报（元素[0].value）未定义的名称alert（elements[1].value）name<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>
注册
名字*
姓*
密码*
喜爱的食物*
（无）
鸡
披萨
意大利面食
汉堡包
牛排
性别*
-
男性
-
女性
var form=document.getElementById（'register'）；
var元素=form.elements；
form.noValidate=真；
表单.addEventListener（'submit'，函数（事件）{
警报（元素[0].value）；//显示“未定义”--为什么？
对于（var i=0；i元素在尝试运行验证例程之前，测试元素标记名
的值，查看是否正在处理输入/选择/文本区域。不要使用警报进行调试console.log（elements）
并查看什么元素是elements[0]
（这是字段集）。@JJJ谢谢你的建议。这听起来很奇怪，但很有效。你说使用数字索引是个坏主意：那么，你建议在我的代码中修改什么？@sgrontflix-该评论是针对n1kkou的建议，即使用document.forms[0]
而不是document.getElementById
。您使用的是ID而不是数字索引，所以我不建议您更改它。哦，好的。感谢您对使用标记名进行测试的建议。你真棒，伙计！