使用PokeAPI开发宝可梦猜名游戏时总场次span元素不更新求助

总游戏场次不更新的核心原因 #

1. 没有对gamesPlayed做自增操作：整个代码中仅给该变量初始赋值为0，没有任何触发+1的逻辑，数值自然不会变化
2. 变量命名冲突：一开始你把gamesPlayed、score定义为对应span的DOM对象，后续直接赋值为数字覆盖了原DOM引用，属于严重隐患
3. 计数触发逻辑缺失：你没有明确游戏局数的结算时机，正常逻辑下用户提交答案（无论对错）、点击next跳过当前题都属于一局结束，两种场景都需要给总场次+1
4. 额外隐藏问题：你把DOM元素#jumble的变量名定义为jumbledName，后续使用时直接写jumble.textContent属于变量名写错，也会导致功能异常

修复代码示例 #

// 1. 变量命名区分DOM对象和计数变量，避免冲突
const jumbleEl = document.querySelector("#jumble");
const guessInputEl = document.querySelector('#guess')
const submitButtonEl = document.querySelector('#submit')
const nextButtonEl = document.querySelector('#next')
const messageEl = document.querySelector('#msg')
const scoreEl = document.querySelector('#score')
const gamesPlayedEl = document.querySelector('#gamesPlayed')

// 单独定义业务计数变量和当前题目存储变量
let score = 0;
let gamesPlayed = 0;
let currentPokeName = ''

let getPokemonName = function() {
    fetch(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random()*151+1)}/`)
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            const pokeName = data.name;
            const pokeNameJumbled = shuffleStr(pokeName);
            displayInfomation(pokeName, pokeNameJumbled);
        });
};
getPokemonName();
guessInputEl.value=''

const displayInfomation = function(name, jumbledName) {
    currentPokeName = name;
    jumbleEl.textContent = jumbledName;
};
const displayMessage = function(message) {
    messageEl.textContent = message;
};

const checkName = function () {
    const guess = guessInputEl.value.toLowerCase().trim();
    if (!guess) {
        displayMessage("未输入答案！");
        return
    }
    // 提交答案即结算一局
    gamesPlayed++
    gamesPlayedEl.textContent = gamesPlayed
    if (guess === currentPokeName) {
        displayMessage(`答对啦！正确答案是${currentPokeName}!`)
        score++
        scoreEl.textContent = score;
    } else {
        displayMessage(`答错了哦！`);
    }
    guessInputEl.value=''
};

// next按钮绑定的逻辑，跳过也结算一局
const handleNext = function() {
    gamesPlayed++
    gamesPlayedEl.textContent = gamesPlayed
    displayMessage('打乱的字母是宝可梦名称哦')
    getPokemonName()
}

// 改成独立的工具函数，不要直接修改原生String原型，避免全局冲突
function shuffleStr(str) {
    const a = str.split(""),
        n = a.length;
    for (let i = n - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        const tmp = a[i];
        a[i] = a[j];
        a[j] = tmp;
    }
    return a.join("");
}

submitButtonEl.addEventListener('click', checkName)
nextButtonEl.addEventListener('click',handleNext)
// 额外优化：支持回车提交答案
guessInputEl.addEventListener('keyup', e => {
    if(e.key === 'Enter') checkName()
})

额外代码优化建议 #

• 减少重复DOM查询：已经将DOM对象存在变量中就直接复用，不要每次操作都执行querySelector
• 增加请求锁：接口请求较慢时，多次点击next会重复发请求，可以加个状态锁避免重复请求
• 增加容错处理：给fetch加catch捕获接口异常，避免请求失败时页面无响应
• 增加输入过滤：可以自动过滤用户输入的空格、特殊符号，降低误判概率

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