CODEWITHSUNDEEP
javascript
Bilge kağan Koç
Bilge kağan Koç

Reputation: 3

Javascript addEventListener click problem

There is a problem that I have been dealing with for 2 days but could not solve. I am creating a quiz app where you can choose from 4 options. The program works correctly when I make the first choice. but when I make the second choice it reacts as if I clicked it twice. When I make the third choice it reacts as if I clicked it 3 times. I only made two choices, but the program makes it look like I made 3 choices.

HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="/src/ionicons.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz APP</title>
</head>

<body>
    <div class="container game">
        <div class="true-false-line">
            <span><i class="ion-checkmark"></i></span>
            <span><i class="ion-checkmark"></i></span>
            <span><i class="ion-close"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
        </div>
        <div class="question-title">
            <p>What is the image storage solution that is part of Docker Enterprise Edition called?</p>

        </div>
        <div class="question-number">
            <span>10</span>
        </div>
        <div class="choices">
            <div class="choice">Trusted Refisrty</div>
            <div class="choice">Docker Degister</div>
            <div class="choice">Docker Hub</div>
            <div class="choice">Universal COntrol Plane</div>
        </div>

    </div>



    <script src="app.js"></script>
</body>

</html>

JS Code

//DOM Objects
const TFLine = document.querySelector(".true-false-line");
const questionTitle = document.querySelector(".question-title");
const questionNumber = document.querySelector(".question-number");
const choices = document.querySelector(".choices");
const choice = document.querySelectorAll(".choice");
const container = document.querySelector(".container");

//Questions
const questions = [
    {
        title: "1Scoville ölçeği hangisini ölçer?",
        choice: [
            "Deniz tuzluluğunu",
            "Çikolata tatlılığını",
            "Limon ekşiliğini",
            "Biber acılığını"
        ],
        trueChoice: "Biber acılığını"
    }
    ,
    {
        title: "2aumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu Tepesi nerededir?",
        choice: [
            "Hawai",
            "Yeni Zelanda",
            "Galler",
            "Hindistan"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "3Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    }, {
        title: "4Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "5Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "6Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "7Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    }



]

function Quiz(question, score, index) {
    this.question = question;
    this.score = 0;
    this.index = 0;
}

Quiz.prototype.getQuestion = function () {
    return this.question[this.index];
}
Quiz.prototype.checkAnswer = function (answer) {
    if (answer == this.question[this.index].trueChoice) {
        this.score++;
        this.index++;
        console.log("true");
        return true;
    }
    else {
        this.index++;
        console.log("false");
        return false;
    }
}

const getQuiz = new Quiz(questions);

loadQuestion();


function loadQuestion() {
    const question = getQuiz.getQuestion();
    const getNumber = getQuiz.index;
    questionTitle.firstElementChild.textContent = question.title;
    questionNumber.firstElementChild.textContent = getNumber + 1;
    choice.forEach(function (choice, x) {
        choice.textContent = question.choice[x];

    })
    choices.addEventListener("click", function (e) {
        if (e.target.className == "choice") {
            getQuiz.checkAnswer(e.target.textContent)
            loadQuestion();
        }
    })
}

Upvotes: 0

Views: 93

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

Move the following piece of code outside loadQuestion since you're registering the click event on choices element again and again on call of this function :-

choices.addEventListener("click", function (e) {
        if (e.target.className == "choice") {
            getQuiz.checkAnswer(e.target.textContent)
            loadQuestion();
        }
    })

Working code :-

//DOM Objects
const TFLine = document.querySelector(".true-false-line");
const questionTitle = document.querySelector(".question-title");
const questionNumber = document.querySelector(".question-number");
const choices = document.querySelector(".choices");
const choice = document.querySelectorAll(".choice");
const container = document.querySelector(".container");

//Questions
const questions = [
    {
        title: "1Scoville ölçeği hangisini ölçer?",
        choice: [
            "Deniz tuzluluğunu",
            "Çikolata tatlılığını",
            "Limon ekşiliğini",
            "Biber acılığını"
        ],
        trueChoice: "Biber acılığını"
    } ,
    {
        title: "2aumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu Tepesi nerededir?",
        choice: [
            "Hawai",
            "Yeni Zelanda",
            "Galler",
            "Hindistan"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "3Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    }, {
        title: "4Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "5Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "6Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    },
    {
        title: "7Bir işin uygun ve kolay olduğunu belirtmek için hangisi söylenir?",
        choice: [
            "Burnuma göre",
            "Kaşıma göre",
            "Bıyığıma göre",
            "Kafama göre"
        ],
        trueChoice: "Yeni Zelanda"
    }



]

function Quiz(question, score, index) {
    this.question = question;
    this.score = 0;
    this.index = 0;
}

Quiz.prototype.getQuestion = function () {
    return this.question[this.index];
}
Quiz.prototype.checkAnswer = function (answer) {
    if (answer == this.question[this.index].trueChoice) {
        this.score++;
        this.index++;
        console.log("true");
        return true;
    }
    else {
        this.index++;
        console.log("false");
        return false;
    }
}

const getQuiz = new Quiz(questions);

loadQuestion();


function loadQuestion() {
    const question = getQuiz.getQuestion();
    const getNumber = getQuiz.index;
    questionTitle.firstElementChild.textContent = question.title;
    questionNumber.firstElementChild.textContent = getNumber + 1;
    choice.forEach(function (choice, x) {
        choice.textContent = question.choice[x];
    })
}

choices.addEventListener("click", function (e) {
        if (e.target.className == "choice") {
            getQuiz.checkAnswer(e.target.textContent)
            loadQuestion();
        }
    })
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="/src/ionicons.min.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz APP</title>
</head>

<body>
    <div class="container game">
        <div class="true-false-line">
            <span><i class="ion-checkmark"></i></span>
            <span><i class="ion-checkmark"></i></span>
            <span><i class="ion-close"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
            <span><i class="ion-ios-circle-outline small"></i></span>
        </div>
        <div class="question-title">
            <p>What is the image storage solution that is part of Docker Enterprise Edition called?</p>

        </div>
        <div class="question-number">
            <span>10</span>
        </div>
        <div class="choices">
            <div class="choice">Trusted Refisrty</div>
            <div class="choice">Docker Degister</div>
            <div class="choice">Docker Hub</div>
            <div class="choice">Universal COntrol Plane</div>
        </div>

    </div>



    <script src="app.js"></script>
</body>

</html>

Upvotes: 1

Related Questions