I don't understand why it doesn't work. The addEventListener is not activated

Everything works but when i click on the buttons, the website send me (before starting)

the code is not from me but my mates leaves me 3 days ago and i have to give a webapp in 2 days :).

Any help is welcome.

script.js:112 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at script.js:112:9

then when i click on a button

script.js:54 Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')
    at affectation_valeur (script.js:54:19)
    at HTMLButtonElement.init (script.js:65:1)

<!-- the questions -->
let questions = [
    {
        question: 'Quelle est la capitale de la France?',

        answers:[
            { text : 'bxl', correct:'false', index:1 },
            { text : 'juin', correct:'false', index:2 },
            { text : 'ab', correct:'false', index:3 },
      e      { text : 'paris', correct:'correct', index:4 }
        ]
    },

    {
        question: 'Quell est la capitale de la France?',

        answers:[
            { text : 'bxl', correct:'false', index:1 },
            { text : 'juin', correct:'false', index:2 },
            { text : 'ab', correct:'false', index:3 },
            { text : 'paris', correct:'correct', index:4 }
        ]
    }

]



let controls = document.querySelector('.controls');
let start = document.querySelector('#start-btn');
let next = document.querySelector('#next-btn');

let answerButtons = document.querySelector('#answer-buttons');
let btns = document.querySelector('.btn');

let container = document.querySelector('.container');
let questionContainer = document.querySelector('#question-container');
let question = document.querySelector('#question');

let i=0;
let k;
let kl;

let bodyStyle = document.body.style;
container.style.backgroundColor = '#123';

function color_int() {
    bodyStyle.backgroundColor = '#555';
    btns[0].style.backgroundColor='#f00';
    btns[1].style.backgroundColor='#ff0';
    btns[2].style.backgroundColor='#0f0';
    btns[3].style.backgroundColor='#00f';
}

function affectation_valeur(){
btns[0].innerHTML = questions[i].answers[0].text;
btns[1].innerHTML = questions[i].answers[1].text;
btns[2].innerHTML = questions[i].answers[2].text;
btns[3].innerHTML = questions[i].answers[3].text;
}

let init = function() {
questionContainer.style.display = 'block';
start.style.display = 'none';

question.innerHTML = questions[0].question;
affectation_valeur();
color_int();

}



let Reponse = function(e) {
    for (let l = 0; l<=3;l  ) { if (questions[i].answers[l].correct == 'true') {x=l;}}
    for (k=0; k<=3; k  ){
        if (questions[i].answers[k].correct == 'true'&& questions[i].answers[k].text == e.target.textContent){
            bodyStyle.backgroundColor = '#0f0';
            btns[k].textContent = 'Good';
        }
        
        if (questions[i].answers[k].correct == 'false'&& questions[i].answers[k].text == e.target.textContent){
            bodyStyle.backgroundColor = 'red';
            btns[k].textContent = 'bad';
        }
        if (k!=x){
            btns[k].style.backgroundColor = 'red';
            btns[k].textContent = 'bad';
        }else{
            btns[k].style.backgroundColor = '#0f0';
            btns[k].textContent = 'good';
        }
    
    }   
    kl = e.target.textContent 
}



let suivant = function(){
    i  ;
    if (!kl) {alert('Choissisez une réponse avant de continuer');}
    question.innerHTML = questions[i].question;

    affectation_valeur();
    color_int();
    if(i>4){i=4}
    kl = null;
}

start.addEventListener('click', init, false);
next.addEventListener('click', suivant, false);

btns[0].addEventListener('click', Reponse, false);
btns[1].addEventListener('click', Reponse, false);
btns[2].addEventListener('click', Reponse, false);
btns[3].addEventListener('click', Reponse, false);

CodePudding user response：

Your mates used querySelector() instead of querySelectorAll() to store the references:

let btns = document.querySelector('.btn');

Which makes the variable btns store the reference to the first element it finds that matches the query .btn. But when the eventlistners are added, your code is expecting an array, looking for the first element of btns, which doesn't exist and thus is undefined:

btns[0].addEventListener('click', Reponse, false);

To make sure the btns stores all the elements with class btn in an array, use:

let btns = document.querySelectorAll('.btn');

Depending of how the rest of your code looks, you might need to do the same for:

let answerButtons = document.querySelector('#answer-buttons');

CodePudding user response：

try this

let btns = document.querySelectorAll('.btn');

btns.forEach((btn) => {
   // your logic goes here
   console.log(btn)
})