我试图查看通过console.log输入到表单中的值，但收到了此错误消息。我不知道为什么会发生这种事。它是否以某种方式连接到本地服务器？还是JS问题？如果有任何光线，我将不胜感激。非常感谢。
这是JavaScript代码(index.js(
// Person Constructor
function Person(age, relationship, smoker){
this.age = age;
this.relationship = relationship;
this.smoker = smoker;
}
// UI Constructor
function UI() {}
// Event Listeners
document.querySelector('form').addEventListener('submit',
function(e){
const age = document.getElementsByName("age")[0].value,
relationship = document.getElementsByName("relationship")[0].value,
smoker = document.getElementsByName("smoker")[0].value
console.log(age, relationship, smoker)
e.preventDefault();
});
这是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Household builder</title>
<style>
.debug {
font-family: monospace;
border: 1px solid black;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1>Household builder</h1>
<div class="builder">
<ol class="household"></ol>
<form>
<div>
<label>Age
<input type="text" name="age">
</label>
</div>
<div>
<label>Relationship
<select name="rel">
<option value="">---</option>
<option value="self">Self</option>
<option value="spouse">Spouse</option>
<option value="child">Child</option>
<option value="parent">Parent</option>
<option value="grandparent">Grandparent</option>
<option value="other">Other</option>
</select>
</label>
</div>
<div>
<label>Smoker?
<input type="checkbox" name="smoker">
</label>
</div>
<div>
<button class="add">add</button>
</div>
<div>
<button type="submit">submit</button>
</div>
</form>
</div>
<pre class="debug"></pre>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
您使用的是document.getElementsByName("relationship")，但您的关系元素实际上使用的是name="rel"；把那条线换成document.getElementsByName("rel")，你应该很好！
您收到错误消息是因为JS的那一行失败了，这意味着后面的e.preventDefault();行永远不会执行，这意味着您的表单实际上正在发布。如果你检查JS控制台，你应该会看到一个类似TypeError: document.getElementsByName(...)[0] is undefined的错误
还要注意，对于您的复选框，您现在正在检索value属性，它将始终是字符串"on"；您可能希望使用checked属性，该属性将告诉您是否已选中该框。