从合并数组随机选图的计分逻辑bug求助（HTML/CSS/JS项目）

我正在做一个类似打地鼠的课程项目，用HTML、CSS和JavaScript实现。项目里有两个数组：blessings存储点击可加分的图片路径，problems存储点击会减分的图片路径。合并两个数组后随机选图展示，但现在不管点击哪种图片，只会加分，不会减分。排查后发现是if条件中的数组判断逻辑存在问题。

原代码 #

let score = 1;

let problems = [
    'images/bad/angryex.jpg',
    'images/bad/badcredit.jpg',
    'images/bad/badkids.jpg',
    'images/bad/boss.jpg',
    'images/bad/carinsurance.png',
    'images/bad/carnote.jpg',
    'images/bad/carproblems.jpg',
    'images/bad/daycare.png',
    'images/bad/fakefriends.jpg',
    'images/bad/gasbill.jpg',
    'images/bad/lightbill.jpg',
    'images/bad/medicalbill.jpg',
    'images/bad/phonebill.png',
    'images/bad/rentbill.jpg',
    'images/bad/studentloan.jpg'
];

let blessings = [
    'images/good/bonus.png',
    'images/good/dayOff.png',
    'images/good/newCar.jpeg',
    'images/good/payday.jpeg',
    'images/good/promotion.jpeg',
    'images/good/shopping.jpeg',
    'images/good/spa.jpeg',
    'images/good/taxRefund.jpeg',
    'images/good/vacation.jpeg',
];

//Combine the 2 arrays into one//
let allImages = problems.concat(blessings);
console.log(allImages.length);

// Generate random image and chooses random tile//
function randomImage() {
    let randomImageIndex = Math.floor(Math.random() * allImages.length);
    let randomTileIndex = Math.floor(Math.random() * 9); // Assuming you have 9 tiles//
    let tile = document.getElementById(randomTileIndex.toString());

    //Makes sure that only one image can cover a hat at any one time//
    while (tile.firstChild) {
        tile.firstChild.remove();
    }

    // Create a new img element
    let imgElement = document.createElement('img');
    imgElement.src = allImages[randomImageIndex];
    imgElement.style.width = '70px';
    imgElement.style.position = 'relative';
    imgElement.style.marginLeft = '40px'
    //Had to assign the element a class name here in JS to be able to style it in CSS
    imgElement.className = 'images'

    // Append the img element to the tile
    tile.appendChild(imgElement);

    //add or subtract to score//
    function scorer() {
        imgElement.onclick = function() {
            this.remove();
            if (blessings.includes(this.src)) {
                document.getElementById("score").innerText = 'Score: ' + score;
                score++
                console.log(score);
            } else if (problems.includes(this.src)) {
                document.getElementById("score").innerHTML = 'Score: ' + score;
                score--
                console.log(score);
            } else {
                console.log('we got it');
            }

        };
    }
    scorer()
}

问题原因 #

你用this.src判断图片所属数组，但浏览器会把img的src属性解析为绝对路径（比如http://localhost:8080/images/good/bonus.png），而blessings和problems数组里存储的是相对路径（比如images/good/bonus.png），两者完全不匹配，导致blessings.includes(this.src)和problems.includes(this.src)都返回false。你当前出现“都加分”的情况，是因为代码先设置分数文本再修改分数——如果判断不成立，分数不会变更，但初始分数为1，容易造成误判。

修复方案 #

创建图片元素时，把原始相对路径存到元素的自定义属性dataset.path中，后续判断时用这个属性值检查数组：

修改后的代码（标注关键修改） #

let score = 1;

let problems = [
    'images/bad/angryex.jpg',
    'images/bad/badcredit.jpg',
    'images/bad/badkids.jpg',
    'images/bad/boss.jpg',
    'images/bad/carinsurance.png',
    'images/bad/carnote.jpg',
    'images/bad/carproblems.jpg',
    'images/bad/daycare.png',
    'images/bad/fakefriends.jpg',
    'images/bad/gasbill.jpg',
    'images/bad/lightbill.jpg',
    'images/bad/medicalbill.jpg',
    'images/bad/phonebill.png',
    'images/bad/rentbill.jpg',
    'images/bad/studentloan.jpg'
];

let blessings = [
    'images/good/bonus.png',
    'images/good/dayOff.png',
    'images/good/newCar.jpeg',
    'images/good/payday.jpeg',
    'images/good/promotion.jpeg',
    'images/good/shopping.jpeg',
    'images/good/spa.jpeg',
    'images/good/taxRefund.jpeg',
    'images/good/vacation.jpeg',
];

let allImages = problems.concat(blessings);
console.log(allImages.length);

function randomImage() {
    let randomImageIndex = Math.floor(Math.random() * allImages.length);
    let randomTileIndex = Math.floor(Math.random() * 9);
    let tile = document.getElementById(randomTileIndex.toString());

    while (tile.firstChild) {
        tile.firstChild.remove();
    }

    let imgElement = document.createElement('img');
    const imagePath = allImages[randomImageIndex]; // 保存原始相对路径
    imgElement.src = imagePath;
    // 关键：将原始路径存入自定义属性
    imgElement.dataset.path = imagePath;
    imgElement.style.width = '70px';
    imgElement.style.position = 'relative';
    imgElement.style.marginLeft = '40px'
    imgElement.className = 'images'

    tile.appendChild(imgElement);

    function scorer() {
        imgElement.onclick = function() {
            this.remove();
            // 使用自定义属性中的路径进行判断，而非this.src
            if (blessings.includes(this.dataset.path)) {
                score++; // 先更新分数再修改DOM，逻辑更合理
                document.getElementById("score").innerText = 'Score: ' + score;
                console.log(score);
            } else if (problems.includes(this.dataset.path)) {
                score--; // 先减分再更新DOM
                document.getElementById("score").innerText = 'Score: ' + score;
                console.log(score);
            } else {
                console.log('路径不匹配');
            }
        };
    }
    scorer()
}

额外优化点 #

• 调整分数更新逻辑：先修改score变量，再更新DOM文本，确保显示的是最新分数
• 统一使用innerText而非混合innerText和innerHTML，避免不必要的HTML解析风险

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