JavaScript addEventListener与innerHTML未定义报错求助

我接手了队友遗留的WebApp项目，需在2天内完成交付，但当前代码存在以下问题：

• 页面加载时触发报错：script.js:112 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
• 点击按钮后触发报错：script.js:54 Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

原代码如下：

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

问题分析与修复方案 #

1. 页面加载addEventListener报错的根源 #

你用document.querySelector('.btn')获取按钮，这个方法只会返回第一个匹配.btn类的单个元素，不是数组。后面用btns[0]、btns[1]去访问，得到的都是undefined，调用addEventListener自然报错。

修复：把获取按钮的代码改成querySelectorAll，它会返回所有匹配的元素集合，支持索引访问：

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

2. 点击按钮innerHTML报错的解决 #

这个报错和上面是同一个原因——btns不是数组，btns[0]是undefined，无法设置innerHTML。修复btns的定义后，这个问题会自动解决。

额外隐藏问题修复（避免后续踩坑） #

除了核心报错，代码里还有几个bug必须处理：

• 数组语法错误：第一个questions的answers数组里，第四个元素前多了个e字符，直接删除即可：

  // 修复后
  { text : 'ab', correct:'false', index:3 },
  { text : 'paris', correct:'correct', index:4 }
  

• 未声明变量x：Reponse函数里用了x但没声明，会产生全局变量，在函数开头加let x;：

  let Reponse = function(e) {
      let x; // 添加这行
      for (let l = 0; l<=3;l++) { if (questions[i].answers[l].correct == 'correct') {x=l;}}
      // 其余代码不变
  }
  

• 数组越界风险：suivant函数里i++后直接访问questions[i]，但你的questions只有2个元素，当i=2时会报错，修改判断逻辑：

  let suivant = function(){
      if (!kl) {alert('Choissisez une réponse avant de continuer'); return;}
      i++;
      if(i >= questions.length){
          i = questions.length - 1;
          alert('已经是最后一题了');
      }
      question.innerHTML = questions[i].question;
      affectation_valeur();
      color_int();
      kl = null;
  }
  

• 判断条件错误：questions里的正确答案标识是'correct'，但代码里判断的是'true'，永远匹配不到，改成== 'correct'：

  // 原错误代码
  if (questions[i].answers[l].correct == 'true') {x=l;}
  // 修复后
  if (questions[i].answers[l].correct == 'correct') {x=l;}
  

内容的提问来源于stack exchange，提问作者Nekreal 28