投票应用选中13位候选人但打印仅显示半数的技术求助

核心问题点 #

1. 数组索引遍历遗漏：原代码用数组pilihan存储选中项，但以候选人ID作为数组索引，若ID不是连续的0起始整数，数组中会存在大量空元素，forEach会跳过这些空元素，导致部分选中项无法被遍历。
2. HTML拼接语法错误：拼接的HTML存在未闭合的引号、重复的style属性，导致浏览器解析异常，部分候选人DOM无法正确渲染。
3. 属性拼写错误：element.jabatin应为element.jabatan，拼写错误会导致字段显示undefined，破坏DOM结构渲染。
4. 打印方法错误：直接调用print(innerHTML)不是标准打印方式，且未等待DOM渲染完成就触发打印，导致部分内容未加载。
5. 未处理取消选中操作：复选框取消选中时未从存储中移除对应项，可能残留无效数据。

修复代码与步骤 #

1. 修正打印函数逻辑

将数组存储改为对象存储，修复语法错误与打印逻辑：

var pilihan = {}; // 改用对象存储，避免索引问题

function inputPilihan(id, nama, jabatanSebelum, daerahAsal, noCalon) {
    const checkbox = document.querySelector(`input[value="${id}"]`);
    if (checkbox.checked) {
        pilihan[id] = { nm: nama, jabatan: jabatanSebelum, daerah: daerahAsal, no: noCalon };
    } else {
        delete pilihan[id]; // 取消选中时删除对应项
    }
}

function cetak() {
    document.getElementById('daftar').style.visibility = "hidden";
    const viewElement = document.getElementById('view');
    const pageElement = document.getElementById('page');
    
    viewElement.style.visibility = "visible";
    pageElement.innerHTML = '';
    
    // 遍历对象中所有选中的候选人数据
    Object.values(pilihan).forEach(element => {
        // 修正HTML语法与属性拼写错误
        pageElement.innerHTML += `
            <div style="display: inline-flex; margin-bottom: 20px;">
                <div>
                    <p style="text-align: center;">${element.nm}</p>
                    <p>${element.jabatan}</p>
                    <p>${element.daerah}</p>
                </div>
                <div style="text-align: right; font-size: 64px; font-weight: 800; padding: 10px; background-color: rgb(235, 235, 235); margin-left: 30px;">
                    ${element.no}
                </div>
            </div>
        `;
    });
    
    // 延迟打印确保DOM渲染完成，打印后恢复原视图
    setTimeout(() => {
        window.print();
        viewElement.style.visibility = "hidden";
        document.getElementById('daftar').style.visibility = "visible";
    }, 100);
}

2. 修正打印视图的HTML标签闭合

原代码中div标签未闭合，修复后：

<div id="view" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden;">
    <div id="page" style="background-color: rgb(223, 223, 223); padding: 50px;">
    </div>
</div>

3. 可选：添加打印样式优化

通过CSS媒体查询控制打印内容，避免打印无关元素：

@media print {
    body * {
        visibility: hidden;
    }
    #view, #view * {
        visibility: visible;
    }
    #view {
        position: absolute;
        left: 0;
        top: 0;
    }
}

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