javascript - Javascript 代码使用单选按钮和 addlistener 和数组
问题描述
我有一些代码来测试具有数组知识的函数,当我选择“第一人”按钮等时,它将显示“我是汤姆,我是 25 岁”。
但遗憾的是我的代码不起作用。
请帮帮我。
这是我的脚本:
names = ["Tom", "Jack", "John"];
ages = ["25", "30", "18"];
function introduce(names, ages) {
outputDiv = document.getElementById(output);
outputDiv.value = "I am " + names + "," + "and I am " + ages;
}
if (document.querySelector('input[name="radio_btn"]')) {
document.querySelectorAll('input[name="radio_btn"]').forEach((elem) => {
elem.addEventListener("change", function (event) {
introduce(names, ages);
});
});
}
还有我的 HTML:
<div class="card">
<div class="card-header bg-danger text-white">
<strong>Introduce</strong>
<div class="">
<input type="radio" name="radio_btn" />1st person
<input type="radio" name="radio_btn" />2nd person
<input type="radio" name="radio_btn" />3rd person
<div class="card-body">
<form>
<div class="form-group">
<!-- <label for="output_combo">Output</label> -->
<textarea class="form-control" id="outputCombo" rows="4"></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
解决方案
introduce()
如果您想查看个人信息,您需要发送姓名和年龄才能运行,而不是数组。此外,输出查询选择器应该有正确的 id 可供选择。
output = 'outputCombo'
names = ["Tom", "Jack", "John"];
ages = ["25", "30", "18"];
function introduce(name, age) {
outputDiv = document.getElementById(output);
outputDiv.value = "I am " + name + "," + "and I am " + age;
}
if (document.querySelector('input[name="radio_btn"]')) {
document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => {
elem.addEventListener("change", function(event) {
introduce(names[i], ages[i]);
});
});
}
<div class="card">
<div class="card-header bg-danger text-white">
<strong>Introduce</strong>
<div class="">
<label for="radio1">
<input type="radio" name="radio_btn" id="radio1"/>1st person
</label>
<label for="radio2">
<input type="radio" name="radio_btn" id="radio2"/>2nd person
</label>
<label for="radio3">
<input type="radio" name="radio_btn" id="radio3"/>3rd person
</label>
<div class="card-body">
<form>
<div class="form-group">
<!-- <label for="output_combo">Output</label> -->
<textarea class="form-control" id="outputCombo" rows="4"></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
推荐阅读
- ruby-on-rails - Rspec:测试回调被触发
- javascript - 初始化图表后如何在 LightningChart JS 中添加 defaultAxisXTickStrategy?
- c# - 仅更改月份和年份的 DateTimePicker
- angular - ionic cordova 在 onesignal-cordova-plugin 中添加平台 ios 错误
- mysql - 不允许返回结果?存储过程 mysql
- javascript - 根据布尔变量设置两个类之一
- apache-spark - 如何从 Dataframe 中的另一列替换 Pyspark 数据框列中的字符串
- windows - 如何在 Windows 上收集 LLDP 信息?
- postgresql - PostgreSQL:角色只能访问他们创建的表
- algorithm - 寻峰算法 MIT OCW 6.006 - 它总是存在吗?