小游戏开发问题：选中特定玩家时无法显示随机问题

核心问题分析 #

• 按钮点击事件未绑定有效逻辑，点击后无任何触发动作
• display 函数依赖全局变量 x，无法获取当前点击的玩家索引，导致无法定位对应问题
• 未使用块级作用域变量声明（let/const），引发全局变量污染，索引值混乱

修正后的代码 #

JavaScript 代码

const Questions1 = [
    "最有可能打破世界纪录？", 
    "最有可能成为CEO？", 
    "最有可能终身不婚？",
    "最有可能触犯法律？",
    "最有可能成为首相？",
    "最有可能给孩子起奇葩（难听）的名字？",
    "最有可能事事迟到？",
    "最有可能在自己的家乡迷路？",
    "最有可能因为厨艺太差不小心毒到别人？",
    "最有可能把自己锁在家门外？",
    "最有可能临时取消计划？",
    "最有可能在恐怖电影里第一个领便当？",
    "最有可能刚拿到手机第一天就摔坏？",
    "最有可能看悲伤电影时哭出来？"
]

const Questions2 = [
    "谁最有可能真的是间谍？",
    "谁最有可能一口气吃完一大桶冰淇淋？",
    "谁最有可能因为最后一分钟才收拾行李错过航班？",
    "谁最有可能装病翘班去海滩？",
]

// 随机抽取问题
const truth = Questions1[Math.floor(Math.random() * Questions1.length)]
const lie = Questions2[Math.floor(Math.random() * Questions2.length)]

const players = []
const numberPlayers = prompt("有多少名玩家？")

// 创建玩家数组
for (let i = 0; i < numberPlayers; i++) {
    players.push({ 
        name: `玩家 ${i + 1}`, 
        intention: true, 
        question: ""
    });
}

// 随机指定一名玩家为"说谎者"
players[Math.floor(Math.random() * players.length)].intention = false

// 为玩家分配对应问题
for (let i = 0; i < players.length; i++) {
    players[i].question = players[i].intention ? truth : lie;
}
console.log(players)

// 创建玩家按钮并绑定点击事件
for (let x = 0; x < numberPlayers; x++) {
    const btn = document.createElement("button")
    btn.id = `player-${x + 1}`
    btn.textContent = `玩家 ${x + 1}`

    // 绑定当前玩家索引，点击时触发展示
    btn.addEventListener("click", () => display(x));

    document.body.appendChild(btn);
}

// 根据索引展示对应玩家的问题
function display(playerIndex) {
    const screenElement = document.getElementById("screen");
    screenElement.value = players[playerIndex].question;
}

HTML 代码

<body>
    <form>
        <input type="text" id="screen" dir="ltr" readonly style="width: 300px; height: 50px; font-size: 16px;" /><br><br><br>
        <input type="reset" id="clear" value="清空" class="outB">
    </form>
    <script src="script.js"></script>
</body>

关键修改点 #

• 给每个按钮的点击事件绑定当前玩家的索引，确保点击时能精准定位对应问题
• 修改 display 函数，接收玩家索引参数，避免依赖全局变量
• 将所有全局变量改为块级作用域变量（let/const），防止变量污染
• 优化按钮文本为更清晰的"玩家X"，提升交互体验
• 调整HTML中script标签的位置，确保DOM加载完成后再执行JS逻辑

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