我想制作一个二维对象数组,并累积存储用户输入的学生信息。然后,此代码的另一个方面是用户可以搜索名称,信息将从数组中获取并显示。第二部分对我不起作用。
var name, section, gender, age, faveSubj1, faveSubj2, faveSubj3;
var studRec = [];
function saveButton() {
var tempBin = [];
tempBin.section = document.getElementById("section").value;
tempBin.age = document.getElementById("age").value;
tempBin.gender = document.getElementById("gender").value;
tempBin.faveSubj1 = document.getElementsByClassName("faveSubj")[0].value;
tempBin.faveSubj2 = document.getElementsByClassName("faveS ubj")[1].value;
tempBin.faveSubj3 = document.getElementsByClassName("faveSubj")[2].value;
var name = document.getElementById("name").value;
studRec[name] = tempBin;
console.log(studRec);
document.getElementById("form").reset();
}
function studFind() {
var nameSearched = document.getElementById("nameSearch").value;
var determiner = studRec.includes(nameSearched);
if (determiner == true) {
console.log(studRec[nameSearched]);
} else document.getElementById("result").innerHTML = "The name is not in the database!";
}
<form name="saveStud" method="POST" id="form">
<fieldset>
<legend>Sign-Up</legend>
<p>Section:
<select id="section" autofocus>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
<option value="f">F</option>
<option value="g">G</option>
<option value="h">H</option>
</select><br>
<p>Name:
<input type="text" id="name" required>
<p>Gender:
<select id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<p>Age:
<input type="number" id="age" required>
<p>Favorite Subjects:<br>
<input type="text" class="faveSubj" required><br>
<input type="text" class="faveSubj" required><br>
<input type="text" class="faveSubj" required><br>
<button type="button" onclick="saveButton()">Save</button>
<button type="reset">Reset</button>
</fieldset>
<fieldset>
<legend>Search-Up</legend>
Name:
<input type="text" id="nameSearch">
<button type="button" onclick="studFind()">Search</button>
<p id="result">
</fieldset>
</form>