如何通过表单输入定义JS数组变量数量，实现批量套用表单信函

1 基础HTML结构 #

先写基础页面骨架，包含初始的数量输入区、动态生成的接收人表单区、提交按钮：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>批量信函生成</title>
</head>
<body>
    <!-- 初始数量输入区域 -->
    <div class="input-count-wrap">
        <label>你想要给多少人发送这封信？</label>
        <input type="number" id="receiverCount" min="1" placeholder="请输入正整数后回车">
    </div>

    <!-- 动态生成的接收人表单区域，初始为空 -->
    <div id="receiverFormArea" style="margin: 20px 0; display: none;"></div>

    <!-- 提交按钮，初始隐藏 -->
    <button id="submitBtn" style="display: none;">生成全部信函</button>

    <script>
        // 后续JS代码写在这里
    </script>
</body>
</html>

2 监听数量输入回车事件，动态生成表单 #

在script标签里写如下JS代码，实现输入数字回车后生成对应数量的输入框：

// 1. 获取DOM元素
const countInput = document.getElementById('receiverCount');
const receiverFormArea = document.getElementById('receiverFormArea');
const submitBtn = document.getElementById('submitBtn');
// 存储接收人数据的数组
let receiverList = [];

// 2. 监听输入框的回车事件
countInput.addEventListener('keydown', function(e) {
    // 判断是否按了回车键
    if(e.key === 'Enter') {
        const count = parseInt(this.value.trim());
        // 合法性校验
        if(isNaN(count) || count < 1) {
            alert('请输入大于0的正整数');
            return;
        }
        // 清空之前生成的表单内容
        receiverFormArea.innerHTML = '';
        // 循环生成对应数量的输入组
        for(let i = 0; i < count; i++) {
            const formItem = `
                <div class="receiver-item" style="margin: 10px 0; padding: 10px; border: 1px solid #eee;">
                    <h4>接收人${i+1}</h4>
                    <div style="margin: 5px 0;">
                        <label>姓名：</label>
                        <input type="text" class="receiver-name" placeholder="请输入姓名">
                    </div>
                    <!-- 你可以在这里新增其他需要的字段，比如地址、职务等 -->
                    <div style="margin: 5px 0;">
                        <label>职务：</label>
                        <input type="text" class="receiver-position" placeholder="请输入职务">
                    </div>
                </div>
            `;
            receiverFormArea.innerHTML += formItem;
        }
        // 显示表单区域和提交按钮
        receiverFormArea.style.display = 'block';
        submitBtn.style.display = 'block';
    }
})

3 监听提交事件，收集数据并生成信函 #

继续在script标签里追加如下代码，实现提交后收集所有数据，新开页面展示所有信函：

submitBtn.addEventListener('click', function() {
    // 1. 清空之前的数组数据
    receiverList = [];
    // 2. 获取所有接收人输入组
    const receiverItems = document.querySelectorAll('.receiver-item');
    // 3. 遍历收集数据
    receiverItems.forEach(item => {
        const name = item.querySelector('.receiver-name').value.trim();
        const position = item.querySelector('.receiver-position').value.trim();
        // 可自行新增其他字段的取值逻辑
        if(!name) {
            alert('请填写所有接收人的姓名');
            return;
        }
        receiverList.push({
            name: name,
            position: position
            // 其他字段按格式追加
        })
    })

    // 4. 新开页面生成信函
    const letterPage = window.open('', '_blank');
    // 拼装新页面的HTML内容
    let pageContent = `
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>全部信函样稿</title>
            <style>
                .letter-item { margin: 30px 0; padding-bottom: 20px; border-bottom: 1px dashed #ccc; }
            </style>
        </head>
        <body>
    `;
    // 循环生成每个接收人的信函
    receiverList.forEach(receiver => {
        // 这里替换成你之前写好的信函模板，把变量换成对应receiver的属性即可
        const letter = `
            <div class="letter-item">
                <p>尊敬的${receiver.name} ${receiver.position}：</p>
                <p>您好！</p>
                <!-- 这里放你之前的信函内容，比如你原来已经写好的固定内容、表单其他公共字段的内容 -->
                <p>此致</p>
                <p style="text-align: right;">发件人：XXX</p>
                <p style="text-align: right;">XXXX年XX月XX日</p>
            </div>
        `;
        pageContent += letter;
    })
    pageContent += `
        </body>
        </html>
    `;
    // 把拼装好的内容写入新页面
    letterPage.document.write(pageContent);
    letterPage.document.close();
})

注意事项 #

• 如果你之前的作业里有公共表单字段（比如发件人信息、信函主题等不随接收人变化的内容），可以保留在基础页面里，提交时一起取值放到信函模板里即可
• 如果不需要新开页面，也可以把生成的pageContent直接插入到当前页面的新区域展示，避免浏览器拦截弹窗
• 可以自行调整CSS样式让页面更美观，不影响功能逻辑

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