JavaScript动态添加选择题选项输入框失效的解决方法

问题根源 #

你的代码有三个关键错误导致无法生成新选项：

• document.getElementsByClassName("multiple")返回的是类数组集合，不是单个DOM元素，直接调用appendChild会报错
• appendChild只能接收DOM节点，不能直接传入HTML字符串
• 新选项的编号固定为Choice-1，且重复使用唯一IDicon-add，不符合HTML规范

修复步骤 #

1. 改用querySelector(".multiple")直接获取单个父容器元素，比类数组取值更简洁
2. 使用innerHTML += html的方式追加HTML字符串，避免DOM节点转换的麻烦
3. 根据已有选项数量自动生成新选项的编号，同时把重复的ID换成class

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Multiple Choice Question</title>
    <link rel="stylesheet" href="./multiple.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
    <div class="multiple">
        <div class="question">
            <label id="question-label" for="question">Question</label>
            <textarea name="question-area" id="qarea" cols="38" rows="5"></textarea>
        </div>
        <div class="answer">
            <label class="answer-label" for="answer">Choice-1 </label>
            <input class="answer-inp" type="text">
            <i class="fa-solid fa-circle-plus fa-xl icon-add" onclick="add_more_field()"></i>
        </div>
    </div>
    <script src="./multiple.js"></script>
</body>
</html>

JavaScript部分

function add_more_field(){
    // 计算新选项的编号
    const answerCount = document.querySelectorAll(".answer").length + 1;
    // 拼接带正确编号的HTML结构，用class替代重复ID
    const html = `<div class="answer">
        <label class="answer-label" for="answer">Choice-${answerCount} </label>
        <input class="answer-inp" type="text">
        <i class="fa-solid fa-circle-plus fa-xl icon-add" onclick="add_more_field()"></i>
    </div>`;
    // 获取父容器并追加HTML
    const container = document.querySelector(".multiple");
    container.innerHTML += html;
}

额外优化建议 #

可以把内联onclick改成事件委托，避免每次新增元素都重复绑定事件，代码更简洁：

// 替换原有JS代码，HTML里的<i>标签无需再写onclick
document.addEventListener("DOMContentLoaded", function(){
    document.querySelector(".multiple").addEventListener("click", function(e){
        if(e.target.classList.contains("icon-add")){
            const answerCount = document.querySelectorAll(".answer").length + 1;
            const html = `<div class="answer">
                <label class="answer-label" for="answer">Choice-${answerCount} </label>
                <input class="answer-inp" type="text">
                <i class="fa-solid fa-circle-plus fa-xl icon-add"></i>
            </div>`;
            this.innerHTML += html;
        }
    });
});

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