Javascript 代码使用单选按钮和 addlistener 和数组

Question

我有一些代码来测试一个具有数组知识的函数，当我选择“第一人”按钮等时会显示“我是汤姆，我是 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>

Answer 1

如果您想查看个人信息，您需要将姓名和年龄发送到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>