JavaScript实现点击按钮生成input并将输入值存入数组问题求助

问题修复方案 #

现有代码问题梳理 #

• 事件绑定逻辑冲突：同时使用行内onclick绑定add_field函数、addEventListener绑定不存在的AddNew函数，且添加按钮的class为addButton，JS中选择器写为.btn-add完全匹配不到元素
• 动态生成的input重复设置相同id，违反DOM id唯一性规范
• 缺少提交按钮，也没有对应收集所有输入框值的逻辑

完整可运行代码 #

<body>
<header>
    <form name="input" method="get">
    </form>
    <button class="addButton">Add</button>
    <button id="submitBtn">提交</button>
</header>
<main>
     <div id="input-container"></div>
</main>

<!--Javascript to add input-->
 <script>    
        let array = [];
        const BtnAdd = document.querySelector(".addButton");
        const submitBtn = document.getElementById("submitBtn");
        const InputContainer = document.getElementById("input-container");
        
        // 绑定添加输入框事件
        BtnAdd.addEventListener("click", add_field);
        // 绑定提交收集数据事件
        submitBtn.addEventListener("click", collectInputValue);

    function add_field () { 
            const inputList = document.createElement("input");
            inputList.setAttribute('class','InputField');
            // 不要重复设置相同id，删除该行逻辑
            InputContainer.appendChild(inputList);
    };

    function collectInputValue() {
        // 清空原有数组，避免旧数据残留
        array = []
        // 选中所有动态生成的输入框
        const allInputs = document.querySelectorAll('.InputField')
        allInputs.forEach(input => {
            // 可以根据需求调整是否保留空值，当前默认过滤空输入
            const value = input.value.trim()
            if (value) {
                array.push(value)
            }
        })
        // 此处可替换为你后续的业务逻辑，当前打印查看结果
        console.log('提交的数组内容：', array)
    }
 </script> 
</body>

核心逻辑说明 #

• 新增输入框逻辑：点击Add按钮生成新的input元素，仅设置统一class用于后续批量选择，移除了重复id的设置
• 数据收集逻辑：点击提交按钮时，先清空原有数组避免旧数据干扰，再批量选中所有输入框遍历取值，可根据业务需求调整是否过滤空值，最终所有值存入同一数组

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