Why does my include function is not recognized as a function
Question
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<meta charset="UTF-8">
<meta name="description" content="Creating and Maintaining Student Record Object">
<script>
var section = [];
var name = [];
var gender = [];
var age = [];
var favsub = [];
var studRec = [];
function saveButton() {
studRec[studRec.length] = {
section:document.getElementById("section").value,
name:document.getElementById("name").value,
gender:document.getElementById("gender").value,
age:document.getElementById("age").value,
favsub1:document.getElementsByClassName("favsub")[0].value,
favsub2:document.getElementsByClassName("favsub")[1].value,
favsub3:document.getElementsByClassName("favsub")[2].value,
}
document.getElementById("saveStud").reset();
console.log(studRec[studRec.length-1]);
}
function checker() {
var name = document.getElementById("name1").value;
var section = document.getElementById("section1").value;
var count=studRec.length;
var check;
for(var i=0;i<count;i++)
{
check = studRec[i].includes(name,section);
if( check == true){
return studRec[i];
}
alert("Info does not exist");
}
}
</script>
<form id="saveStud" method="POST">
<center>
<p>Section</p>
<select id="section" autofocus required>
<option value="0">select</option>
<option value="truth">truth</option>
<option value="faith">faith</option>
<option value="honesty">honesty</option>
<option value="charity">charity</option>
<option value="obedience">obedience</option>
<option value="chastity">chastity</option>
<option value="generosity">generosity</option>
<option value="humility">humility</option>
</select><br>
<p>Student Name</p><input id="name" type="text" required><br>
<p>Gender</p>
<select id="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
<p>Age</p><input id="age" type="number" required><br>
<p>Favorite Subjects</p><input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<input class="favsub" type="text" required><br>
<button onclick="saveButton()">save</button>
<button type="reset" value="reset">reset</button>
</center>
</form>
<br>
<form id="search" method="POST">
<center>
<button type="button" onclick="checker()">search</button>
<input id="name1" type="text" placeholder="Enter Student Name" required>
<select id="section1" autofocus required>
<option value="0">select</option>
<option value="truth">truth</option>
<option value="faith">faith</option>
<option value="honesty">honesty</option>
<option value="charity">charity</option>
<option value="obedience">obedience</option>
<option value="chastity">chastity</option>
<option value="generosity">generosity</option>
<option value="humility">humility</option>
</select>
<br>
<button type="button">delete</button>
</center>
</form>
</body>
</html>
The code is suppose to store the student's information in an array using the function saveButton()then after that we type the student's name and select the section and using the search button, the function checker() is suppose to display the information if the the info inputted is included in the array studRec but the line check = studRec[i].includes(name,section); does not work. please help
3 answers
solution1
2 2019-04-10 10:25:32
This is the object you are trying to call includes on:
{ section: document.getElementById("section").value, name: document.getElementById("name").value, gender: document.getElementById("gender").value, age: document.getElementById("age").value, favsub1: document.getElementsByClassName("favsub")[0].value, favsub2: document.getElementsByClassName("favsub")[1].value, favsub3: document.getElementsByClassName("favsub")[2].value, }
You haven't put an includes property there and objects don't have a native includes method. Arrays have one , but {} creates a plain object, not an array.
See How do I check if an object has a property in JavaScript? to test if an object has a property of a given name.
solution2
1 2019-04-10 10:29:16
You have wrong understanding of how .includes works
Demo
[1, 3, 4].includes(3) // true
['apple', 'pie'].includes('american') // false
[{ name: 'John' }, { name: 'Obama' }].includes({ name: 'Obama' }) // true
Note what includes accepts as argument, its same data type as in array
Your mistake - checking wrong value signature
[{
section:document.getElementById("section").value,
name:document.getElementById("name").value,
gender:document.getElementById("gender").value,
age:document.getElementById("age").value,
favsub1:document.getElementsByClassName("favsub")[0].value,
favsub2:document.getElementsByClassName("favsub")[1].value,
favsub3:document.getElementsByClassName("favsub")[2].value,
}].includes(name, section) // false
Must be
[{
section:document.getElementById("section").value,
name:document.getElementById("name").value,
gender:document.getElementById("gender").value,
age:document.getElementById("age").value,
favsub1:document.getElementsByClassName("favsub")[0].value,
favsub2:document.getElementsByClassName("favsub")[1].value,
favsub3:document.getElementsByClassName("favsub")[2].value,
}, {
section:1,
name:1,
gender:1,
age:1,
favsub1:1,
favsub2:1,
favsub3:1,
}].includes({
section:1,
name:1,
gender:1,
age:1,
favsub1:1,
favsub2:1,
favsub3:1,
}) // true
solution3
0 2019-04-10 10:32:45
The function includes() is available for arrays. But while studRec is an array, the members of studRec ( studRec[i] ) are not arrays, but objects.
To search for an object inside the array based on some criteria use the find() function of the array with a callback that checks the criteria.
function checker()
{
let name = document.getElementById("name1").value;
let section = document.getElementById("section1").value;
let result = studRec.find(function(element) {
return element.name == name && element.section == section;
}
);
if(!result)
{
alert("Info does not exist");
}
return result;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.