javascript - 如何使用附加到单选按钮的事件侦听器在 HTML 中插入不同的文本消息
问题描述
我是 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)
});
}
[问题]:
当我单击不同的单选按钮时,图像会按预期更改。但是,短信不会更改,而只会显示默认消息“请选择您的角色”。我猜该switch (a)
参数e.target.value
由于某种原因没有收到,但控制台中没有错误消息。
[我尝试过的]:
- 将函数拆分
charChange(a)
为两个单独的函数(一个用于图像更改,另一个用于文本更改)——没有成功; - 换成——没有成功
switch
。if-else
[预期行为]:
目的是使图像和文本消息一起更改,文本消息显示statWarrior
, statMagician
,statHealer
对象。
当我刚开始学习时,我很乐意接受任何其他意见或建议来改进,这超出了我上面的问题。
提前感谢您的建议。
解决方案
e.target.value 返回一个字符串,但情况需要整数。您可以将a转换为整数,也可以按照我在下面所做的操作,让案例需要字符串。
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.`;
}
}
推荐阅读
- unit-testing - 我是否必须重构我们的代码才能进行谷歌测试(单元测试)?
- drools - 如何使用 Drools (mvel) 将元素添加到数组
- python - 如何通过代理服务器在 OpenCV 中打开视频流?
- visual-studio - Visual Studio 2015 - 启动调试时的最小重建
- r - R中的图例未添加到绘图中
- javascript - (Discord.js) 我想在机器人离线之前在频道上发送一条消息
- f# - Fsharp.Data HttpRequestBody getting 'The mandatory 'grant_type' parameter is missing'
- ida - Windows 10 IDA 免费软件 64 位找不到主
- ios - 使用 React Native 批量导入 sdk 时出现 iOS 错误
- ethereum - 检查 msg.sender 是否是特定类型的合约