JS基础练习|动态创建多个input并且用数组记录其中的数据

news2024/10/5 14:27:01

效果图
在这里插入图片描述、
在点击添加输入框的时候，创建新的元素，并且为其绑定响应的事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成输入框并保存数据</title>
    <style>
        .input-container {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <button id="addInputBtn">添加输入框</button>
    <div id="inputContainer"></div>
    <p>当前输入数据：</p>
    <pre id="dataDisplay"></pre>

    <script>
        // 用于保存输入框编号和相应值的数组
        const inputData = [];

        // 用于保存当前的编号
        let inputCounter = 0;

        // 获取按钮和输入框容器
        const addInputBtn = document.getElementById('addInputBtn');
        const inputContainer = document.getElementById('inputContainer');
        const dataDisplay = document.getElementById('dataDisplay');

        // 给按钮添加点击事件
        addInputBtn.addEventListener('click', function() {
            // 增加编号
            inputCounter++;

            // 创建一个新的 div 作为输入框容器
            const newDiv = document.createElement('div');
            newDiv.classList.add('input-container');

            // 创建一个新的 label 标签，显示编号
            const newLabel = document.createElement('label');
            newLabel.textContent = '输入框 ' + inputCounter + ': ';

            // 设置 label 的 for 属性，使其与输入框关联
            newLabel.htmlFor = 'input' + inputCounter;

            // 创建一个新的输入框
            const newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.name = 'input' + inputCounter; // 设置唯一 name 属性
            newInput.id = 'input' + inputCounter;   // 设置唯一 id 属性

            // 将 label 和 input 添加到 div 中
            newDiv.appendChild(newLabel);
            newDiv.appendChild(newInput);

            // 将新的 div 添加到 inputContainer 中
            inputContainer.appendChild(newDiv);

            // 将该输入框的编号和空值存入数组
            inputData.push({ id: inputCounter, value: '' });

            // 监听每个输入框的变化，实时更新数组中的值
            newInput.addEventListener('input', function(event) {
                const index = inputData.findIndex(item => item.id === inputCounter);
                inputData[index].value = event.target.value;
                displayData(); // 每次输入变化时更新显示
            });

            displayData(); // 初次创建时更新显示
        });

        // 显示当前的数组数据
        function displayData() {
            dataDisplay.textContent = JSON.stringify(inputData, null, 2);
        }
    </script>
</body>
</html>