如何使用附加到单选按钮的事件侦听器在 HTML 中插入不同的文本消息

Question

我是 javascript 的新生，并编写了以下代码，旨在根据单选按钮选择显示不同的图像和文本消息：

*<!-- charSelect.html -->*
<!-- skipped -->
<body>
  <img id = "charImg" src = "1.jpg" width = "500" height = "500" border = "0">
  <div id = "charStat">
  </div>
  <div id = "charSelect">
    <form method = "get" action = "form-action.html">
      <input type = "radio" name="char" value = 0>Warrior<br>
      <input type = "radio" name="char" value = 1>Magician<br>
      <input type = "radio" name="char" value = 2>Healer<br>
      <p>
        <input type = "submit" value="OK">
      </p>
    </form>
  </div>
</body>
<script src="js/charSelect.js"></script>

*// charSelect.js*
let char0 = `img/01.jpg`;
let char1 = `img/02.jpg`;
let char2 = `img/03.jpg`;
let char3 = `img/04.jpg`;

const imgArray = [ char0, char1, char2, char3, ];

const statWarrior = { class: `Warrior`, level: 1, hp: 1200, en: 300, }
const statMagician = { class: `Magician`, level: 1, hp: 800, en: 560, }
const statHealer = { class: `Healer`, level: 1, hp: 900, en: 410, }

const printStat = document.getElementById(`charStat`);
const radio = document.querySelectorAll(`input[type = "radio"]`);

function charChange(a) {
  document.images[0].src = imgArray[a];
  document.images[0].width = 500;
  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.`;
  }
}
for (i = 0; i < radio.length; i++) {
  radio[i].addEventListener(`click`, function (e) {
    charChange(e.target.value)
  });
}

[问题]:
当我单击不同的单选按钮时，图像会按预期更改。但是，文本消息不会更改，只会显示默认消息 "Please select your character"。我猜测 switch (a) 参数由于某种原因未收到 e.target.value，但控制台中没有错误消息。

[我尝试了什么]：

将 charChange(a) 函数拆分为两个独立的函数（一个用于图像更改，另一个用于文本更改）——没有解决；
将 switch 更改为 if-else -- 没有成功。

[预期行为]：
目的是让图片和文字消息一起变化，文字消息显示statWarrior、statMagician、statHealer对象。

由于我刚刚开始学习，我很乐意接受任何其他意见或建议来改进超出我上述问题的内容。

提前感谢您的建议。

Answer 1

e.target.value returns 一个字符串，但大小写需要整数。您可以将 a 变成一个整数，或者按照我在下面所做的，让 case 期望字符串。

function charChange(a) {
    document.images[0].src = imgArray[a];
    document.images[0].width = 500;
    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.`;
    }
}

如何使用附加到单选按钮的事件侦听器在 HTML 中插入不同的文本消息

How to insert different text message in HTML with an event listner attached to radio buttons

html

javascript

event-listener

radio-button