HTML/JS文本游戏if语句参数满足却默认执行else的问题

核心问题分析 #

你的Attack按钮逻辑存在三个关键错误：

• 未正确获取DOM元素的数值内容：let x = foeDefence; 仅拿到DOM元素对象，而非元素内的防御数值；playerAttack同理，需读取元素的textContent（或innerHTML）获取实际值。
• 字符串与数字类型不匹配：从DOM获取的内容是字符串类型，直接用>比较会按字符编码规则判断（而非数值大小），比如字符串"10"会被认为小于"4"，因为第一个字符"1"的ASCII码比"4"小。
• playerAttack未初始化赋值：页面中playerAttack元素初始值为-，且无代码给它设置攻击数值，导致比较时y要么是无效字符串-，要么转换为NaN，必然触发else分支。

修复后的代码 #

<!doctype html>
<head>
</head>
<body>

<h2 id="foe">-</h2>
<h3 id="foeDefence">-</h3>
<h3 id="playerAttack">-</h3>
<h1 id="out">-</h1>

<h1>▒▒▒▒▒▒         ▒▒▒▒▒▒▒
<br>▒                                        ▒
<br>▒                                        ▒
<br>▒                                        ▒</h1>
<h1>                                       </h1>
<br><h1>▒                                        ▒
<br>▒                                        ▒
<br>▒                                        ▒
<br>▒▒▒▒▒▒         ▒▒▒▒▒▒▒
</h1>
<button type="button" onclick='let foe = Math.floor((Math.random() * 100) + 1);
// 生成随机玩家攻击值
document.getElementById("playerAttack").innerHTML = Math.floor((Math.random() * 15) + 1);
if (foe < 46){
    document.getElementById("foe").innerHTML = "slime"
    document.getElementById("foeDefence").innerHTML = "4"
}
else if (foe < 66){
    document.getElementById("foe").innerHTML = "goblin"
    document.getElementById("foeDefence").innerHTML = "6"
}
else if (foe < 100){
    document.getElementById("foe").innerHTML = "troll"
    document.getElementById("foeDefence").innerHTML = "10"
}
else if (foe == 100){
    document.getElementById("foe").innerHTML = "Rabid earthworm"
    document.getElementById("foeDefence").innerHTML = "0.000000000001"
}
'>Enter the next room</button>

<button type="button" onclick='
    // 获取内容并转换为数字类型
    let x = Number(document.getElementById("foeDefence").textContent);
    let y = Number(document.getElementById("playerAttack").textContent);
    // 校验数值有效性
    if (isNaN(x) || isNaN(y)) {
        document.getElementById("out").innerHTML = "请先进入房间生成敌人与攻击值！";
        return;
    }
    if (y > x){
        document.getElementById("out").innerHTML = "get dogged on"
    }
    else{
        document.getElementById("out").innerHTML = "You have succeeded in brutally dismembering the ravenous monster"
    }
'>Attack!!!</button>
</body>

关键修改点 #

1. 初始化playerAttack数值：在"Enter the next room"按钮逻辑中添加随机攻击值生成代码，确保playerAttack有有效数值。
2. 类型转换与数值比较：用Number()将DOM文本内容转为数字，保证比较基于数值大小。
3. 异常情况处理：增加数值合法性校验，避免未进入房间就点击Attack按钮的错误输出。

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