JavaScript新手求助：答题测验代码点击事件报错修复

核心错误1：变量与函数同名冲突 #

你定义的分数变量（onePiece、deathNote等）和对应的点击处理函数重名了。JavaScript中函数本质也是变量，同名会导致变量被函数覆盖，执行onePiece += 1时相当于给函数做加法操作，直接引发报错，同时事件绑定的引用也会失效。

修复方案： #

给分数变量添加前缀区分，比如score_，修改后的代码片段：

// 修改分数变量名
var score_onePiece = 0;
var score_deathNote = 0;
var score_haikyuu = 0;
var score_fruitsBasket = 0;
var questionCount = 0;

然后对应修改每个函数里的分数累加逻辑，以onePiece函数为例：

function onePiece() {
    score_onePiece += 1; // 使用修改后的变量名
    questionCount += 1;

    console.log("questionCount =" + questionCount + "onePiece =" + score_onePiece);

    if (questionCount == 5) {
        console.log("You have finished the quiz!")
        updateResult();
    }
}

其余三个处理函数（deathNote、haikyuu、fruitsBasket）做同样修改，把函数内的变量名替换为带score_前缀的版本。

核心错误2：DOM元素获取时机错误 #

如果你的JS代码在HTML元素加载完成前执行（比如放在<head>标签里），document.getElementById会返回null，调用addEventListener时会抛出"Cannot read property 'addEventListener' of null"的错误。

修复方案： #

把所有获取DOM元素和绑定事件的代码，放到DOM加载完成的回调函数中：

// 等待DOM加载完成后再执行DOM操作
document.addEventListener('DOMContentLoaded', function() {
    //question 1
    var q1a1 = document.getElementById("q1a1");
    var q1a2 = document.getElementById("q1a2");
    var q1a3 = document.getElementById("q1a3");
    var q1a4 = document.getElementById("q1a4");
    //question 2
    var q2a1 = document.getElementById("q2a1");
    var q2a2 = document.getElementById("q2a2");
    var q2a3 = document.getElementById("q2a3");
    var q2a4 = document.getElementById("q2a4");
    //question 3
    var q3a1 = document.getElementById("q3a1");
    var q3a2 = document.getElementById("q3a2");
    var q3a3 = document.getElementById("q3a3");
    var q3a4 = document.getElementById("q3a4");
    //question 4
    var q4a1 = document.getElementById("q4a1");
    var q4a2 = document.getElementById("q4a2");
    var q4a3 = document.getElementById("q4a3");
    var q4a4 = document.getElementById("q4a4");
    //question 5
    var q5a1 = document.getElementById("q5a1");
    var q5a2 = document.getElementById("q5a2");
    var q5a3 = document.getElementById("q5a3");
    var q5a4 = document.getElementById("q5a4");

    // 绑定点击事件
    //question 1
    q1a1.addEventListener("click", onePiece);
    q1a2.addEventListener("click", deathNote);
    q1a3.addEventListener("click", haikyuu);
    q1a4.addEventListener("click", fruitsBasket);
    //question 2
    q2a1.addEventListener("click", fruitsBasket);
    q2a2.addEventListener("click", haikyuu);
    q2a3.addEventListener("click", deathNote);
    q2a4.addEventListener("click", onePiece);
    //question 3
    q3a1.addEventListener("click", deathNote);
    q3a2.addEventListener("click", onePiece);
    q3a3.addEventListener("click", fruitsBasket);
    q3a4.addEventListener("click", haikyuu);
    //question 4
    q4a1.addEventListener("click", haikyuu);
    q4a2.addEventListener("click", deathNote);
    q4a3.addEventListener("click", onePiece);
    q4a4.addEventListener("click", fruitsBasket);
    //question 5
    q5a1.addEventListener("click", onePiece);
    q5a2.addEventListener("click", deathNote);
    q5a3.addEventListener("click", haikyuu);
    q5a4.addEventListener("click", fruitsBasket);
});

可选优化：简化重复代码 #

可以用对象统一管理分数，再写一个通用处理函数，减少冗余代码：

// 用对象统一管理所有分数
var scores = {
    onePiece: 0,
    deathNote: 0,
    haikyuu: 0,
    fruitsBasket: 0
};
var questionCount = 0;

// 通用点击处理函数
function handleAnswer(animeKey) {
    scores[animeKey] += 1;
    questionCount += 1;
    console.log(`questionCount = ${questionCount}, ${animeKey} = ${scores[animeKey]}`);
    if (questionCount === 5) {
        console.log("You have finished the quiz!");
        updateResult();
    }
}

// 绑定事件时改为调用通用函数
q1a1.addEventListener("click", () => handleAnswer("onePiece"));
q1a2.addEventListener("click", () => handleAnswer("deathNote"));
// 其余选项同理替换

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