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

@ZakariaAcharki — The body element start tag is optional in HTML. — Quentin, Apr 10 '19 at 10:21
@JamieEltringham — The head element end tag is optional in HTML (so yes, implicitly by having a form start tag) — Quentin, Apr 10 '19 at 10:24
@Quentin IMO it's a bad practice to wait from the browser to add the tags for you. — Zakaria Acharki, Apr 10 '19 at 10:24
@Quentin i agree it is bad practice to not close your own tags — Jamie Eltringham, Apr 10 '19 at 10:25
The browser won't add "tags". It will generate a DOM (with *elements*) according to the rules of HTML. Whether or not explicitly providing optional tags is best practise is largely a matter of opinion (there are measurable pros and cons in both directions) and very much nothing to do with the problem at hand. — Quentin, Apr 10 '19 at 10:26

score 2 · Answer 1 · answered Apr 10 '19 at 10:25

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.

score 1 · Answer 2 · answered Apr 10 '19 at 10:29

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

NineBerry · Answer 3 · 2019-04-10T10:39:25.203

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;
}

Why does my include function is not recognized as a function

3 Answers3