indexOf is not defined as a fundtion

Question

html code:

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Quiz</title>
        <link rel = "stylesheet" href = "style.css">
    </head>

    <body>
    <div id = "main-division">
    <h1>Quiz</h1>
    </div>
    <div id = "paper">
        <div class = "question">
            <p>How may planets are there in our Solar System?</p>
            <input type = "text" placeholder = "Enter your answer here">
            <button>Submit Answer</button>
        </div>
        <div class = "question">
            <p>What is World's current population?(Answer in round figures)</p>
            <input type = "text" placeholder = "Enter your answer here">
            <button>Submit Answer</button>
        </div>
        <div class = "question">
            <p>How many continents Earth has?</p>
            <input type = "text" placeholder = "Enter your answer here">
            <button>Submit Answer</button>
        </div>
    </div>
    <div id = "footer">
        <h1> &copy Made By Himanshu Shukla</h1>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "app.js"></script>
    </body>
</html>

css code:

body {
    font-family : sans-serif;
}

#main-division {
    font-size : 50px;
    text-align : center;
    color : #82E0AA;
    height : 150px;
    border-bottom : 1px solid #82E0AA;
    margin-bottom : 30px;
}

#footer {
    font-size : 16px;
    text-align : center;
    color : #82E0AA;
    height : 150px;
    border-top : 1px solid #82E0AA;
    margin-top : 30px;
}

.question {
    background-color : #ECF0F1;
    border-radius : 10px;
    font-size : 25px;
    width : 1200px;
    margin : auto;
    text-align : center; 
    height : 170px;
    margin-top: 50px;
}

.question input{
    width : 1000px;
    height : 40px;
    text-align : center;
}

.right {
    text-align : center;
    color : green;
    font-size : 20px;
}

.wrong {
    text-align : center;
    color : red;
    font-size : 20px;
}

.question p{
    padding-top : 10px;
}

.question:hover p{
    color : #82E0AA;
}

.question:hover {
    box-shadow : 6px 6px 25px #A6ACAF;
    background-color : #ECF0F1;
}

button {
    display : block;
    margin : auto;
    height : 36px;
    margin-top : 10px;
    background-color : #2ECC71;
    border : 1px solid #2ECC71;
    border-radius : 5px;
    color : white;
}

js code:

const answers = ['8','7 billion','7'];
const answersText = ['eight','seven billion','seven'];

document.querySelector('#paper').addEventListener('click',
    function(event) {
        if(event.target.tagName === 'BUTTON'){
            const button = event.target;
            const answer = button.previousElementSibling.value;
            const questions = document.getElementById('paper').children;
            // console.log(questions);
            const currentQuestion = button.parentNode;
            // console.log(currentQuestion);
            let questionNumber = questions.indexOf(currentQuestion);            
            if(answer === answers[questionNumber] || answer === answersText[questionNumber])
                button.parentNode.innerHTML = `<h1 class = "right">Correct Answer!</h1>`;
            else
                button.parentNode.innerHTML = `<h1 class = "wrong">Wrong Answer!</h1>`;
        }
    }
);

on running it shows error that:

Uncaught TypeError: questions.indexOf() is not a function at HTMLDivElement <anonymus...>

i think i haven't done anything wrong since i have used the index of function on an array named "questions" and tried to find the index of a div element contained in it..

Kindly help me out i have attached the code above..

Answer 1 · 2018-06-10T11:59:55Z

June 10, 2018 11:59am

Hi Himanshu,

The error is telling you that questions does not have a method called indexOf.

The reason being, questions is a html collection. Which doesn't contain an indexOf method. HTMLCollection Methods

You can try converting questions to an array first, then using Array's indexOf method. Array - indexOf method

I used Array.from to do this:

const questions = Array.from(document.getElementById('paper').children);

Now the error should go away and questionNumber will be populated

Full code:

const answers = ['8','7 billion','7'];
const answersText = ['eight','seven billion','seven'];

document.querySelector('#paper').addEventListener('click',
    function(event) {
        if(event.target.tagName === 'BUTTON'){
            const button = event.target;
            const answer = button.previousElementSibling.value;
            const questions = Array.from(document.getElementById('paper').children);
            console.log(questions);
            const currentQuestion = button.parentNode;
            console.log(currentQuestion);
            let questionNumber = questions.indexOf(currentQuestion);
            console.log(questionNumber);            
            if(answer === answers[questionNumber] || answer === answersText[questionNumber])
                button.parentNode.innerHTML = `<h1 class = "right">Correct Answer!</h1>`;
            else
                button.parentNode.innerHTML = `<h1 class = "wrong">Wrong Answer!</h1>`;
        }
    }
);

Hope this helps :)

Answer 2 · 2018-06-10T15:54:42Z

June 10, 2018 3:54pm

The "children" of an element are in an HTMLCollection. An HTMLCollection is an array-like object but it is not an actual array.

So "questions" does not have an "indexOf" method. But you can apply it using some array (in this example, an empty literal one) and the call method:

            let questionNumber = [].indexOf.call(questions, currentQuestion);

With that change, the program will work as intended.

Welcome to the Treehouse Community

Looking to learn something new?

Himanshu Shukla

Himanshu Shukla

indexOf is not defined as a fundtion

2 Answers

James Anwyl

James Anwyl

Steven Parker

Steven Parker