纯JavaScript游戏开发问题：如何获取选中武器按钮的value值

你的问题核心有两个：一是原代码里用focus()方法判断焦点完全错误（focus()是设置焦点的动作，不是判断是否聚焦），二是依赖焦点状态拿值不可靠——点击start按钮后焦点必然转移。最稳妥的方式是直接记录用户最后点击的武器值，不用依赖焦点。

修改后的代码： #

const weapon1 = document.getElementById("weapon1");
const weapon2 = document.getElementById("weapon2");
const weapon3 = document.getElementById("weapon3");
const startButton = document.getElementById("StartButton"); // 确保变量名与DOM元素ID一致
let playerATT = 10;
let selectedWeaponValue = 0; // 默认未选武器时加0，也可设为3对应第一个武器

// 绑定武器按钮点击事件，记录最后选中的武器值
function handleWeaponClick(e) {
    // 直接读取按钮的value属性，不用硬写数值，更灵活
    selectedWeaponValue = parseInt(e.target.value);
    // 可选：给选中的按钮加视觉焦点样式
    [weapon1, weapon2, weapon3].forEach(btn => btn.classList.remove("focused"));
    e.target.classList.add("focused");
}

weapon1.addEventListener("click", handleWeaponClick);
weapon2.addEventListener("click", handleWeaponClick);
weapon3.addEventListener("click", handleWeaponClick);

startButton.onclick = function() {
    playerATT += selectedWeaponValue;
    console.log("当前攻击值：", playerATT); // 可添加日志验证结果
}

关键改进点： #

• 用点击事件记录选中值：不管焦点如何变化，只要用户点击武器按钮，就将对应值存入selectedWeaponValue，这是最可靠的方式
• 复用按钮value属性：给HTML中的武器按钮设置value="3"、value="6"、value="9"，代码直接读取该属性，避免硬写数值，更易维护
• 可选视觉反馈：通过focused类给选中的按钮添加样式，用户能直观看到选中状态，比依赖原生焦点更清晰

原代码错误说明： #

1. weapon1.focus()是主动设置焦点的方法，返回undefined，所以你的if判断永远不会成立，逻辑完全错误。判断元素是否聚焦应使用weapon1 === document.activeElement，但这种方式在点击start按钮后会失效，不推荐。
2. 原代码的焦点判断仅在页面加载时执行一次，用户后续点击武器按钮不会重新触发判断，导致weaponValue始终为初始的undefined，点击start按钮后会出现NaN错误。

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