JavaScript单选按钮绑定事件后文本不更新问题求助

你遇到的核心问题是类型不匹配：单选按钮的value属性返回的是字符串类型（比如点击Warrior时，e.target.value是"0"而非数字0），但你的switch语句里的case判断用的是数字值，导致所有分支都匹配失败，最终走到default显示默认文本。控制台没有报错是因为这属于逻辑判断问题，而非语法错误。

快速修复方案 #

有两种简单的修复方式，选其一即可：

方式1：将参数转为数字类型

在调用charChange时，把字符串转为数字：

for (i = 0; i < radio.length; i++) {
  radio[i].addEventListener(`click`, function (e) { 
    charChange(Number(e.target.value)); // 转成数字
  });
}

或者在charChange函数内部先转换参数：

function charChange(a) {
  a = Number(a); // 先转为数字
  document.images[0].src = imgArray[a];
  // ... 后续switch逻辑不变
}

方式2：将switch的case改为字符串

把case的数字改成对应的字符串，匹配value的类型：

switch (a) {
case "0": printStat.textContent = JSON.stringify(statWarrior); break;
case "1": printStat.textContent = JSON.stringify(statMagician); break;
case "2": printStat.textContent = JSON.stringify(statHealer); break;
default: printStat.textContent = `Please select your character.`;
}

针对你的需求，这里有几个可以让代码更简洁、易维护的优化方向：

1. 统一角色数据结构 #

把角色的图片路径和属性整合到一个数组里，避免单独定义多个变量，后续新增角色只需在数组里添加元素即可：

// 整合所有角色数据
const characters = [
  { img: 'img/01.jpg', stats: { class: 'Warrior', level: 1, hp: 1200, en: 300 } },
  { img: 'img/02.jpg', stats: { class: 'Magician', level: 1, hp: 800, en: 560 } },
  { img: 'img/03.jpg', stats: { class: 'Healer', level: 1, hp: 900, en: 410 } }
];

2. 简化charChange函数 #

基于整合后的角色数据，函数逻辑可以大幅简化，不再需要switch：

const charImg = document.getElementById('charImg'); // 缓存图片元素
const printStat = document.getElementById('charStat');

function charChange(index) {
  const char = characters[index];
  if (!char) {
    printStat.textContent = `Please select your character.`;
    return;
  }
  // 更新图片
  charImg.src = char.img;
  charImg.width = 500;
  // 更新属性（用更友好的格式展示，替代JSON.stringify）
  printStat.textContent = `Class: ${char.stats.class}
Level: ${char.stats.level}
HP: ${char.stats.hp}
EN: ${char.stats.en}`;
}

3. 更简洁的事件监听 #

用forEach替代传统for循环，代码更易读：

const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach(btn => {
  btn.addEventListener('click', (e) => charChange(Number(e.target.value)));
});

4. 阻止表单默认跳转（可选） #

如果你的表单不需要跳转到form-action.html，可以添加阻止默认提交的逻辑，避免页面刷新：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  // 这里可以添加提交后的逻辑，比如保存用户选择的角色
  const selectedChar = document.querySelector('input[name="char"]:checked');
  if (selectedChar) {
    alert(`You selected: ${characters[selectedChar.value].stats.class}`);
  }
});

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