CODEWITHSUNDEEP
javascripthtml
elu
elu

Reputation: 53

Why does my include function is not recognized as a function

<!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

Upvotes: 3

Views: 84

Answers (3)

NineBerry
NineBerry

Reputation: 28499

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

Upvotes: 0

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

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

Upvotes: 1

Quentin
Quentin

Reputation: 943649

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.

Upvotes: 2

Related Questions