QR Code生成器仅生成首个输入内容的问题排查求助

你的代码核心问题是只获取了第一个输入框的值，并且仅监听第一个输入框的键盘事件，导致第二个输入的内容完全没被纳入处理流程。下面是具体的修复步骤和完整代码：

1. 核心问题点 #

• 原代码用querySelector(".form input")仅选中第一个输入框，第二个输入框的内容从未被读取
• 键盘事件仅绑定在第一个输入框上，导致第二个输入框清空时不会触发二维码隐藏逻辑
• 未将两个输入框的内容合并后传入二维码生成接口

2. 修复后的JavaScript代码 #

var wrapper = document.querySelector(".wrapper"),
    qrInputs = wrapper.querySelectorAll(".form input"); // 获取所有输入框
generateBtn = wrapper.querySelector(".form button");
qrImg = wrapper.querySelector(".qr-code img");
let preValue;

// 合并两个输入框内容的函数
function getCombinedValue() {
    // 用换行分隔姓名和ID，扫描后可读性更好，也可以换成逗号、冒号等其他分隔符
    return qrInputs[0].value.trim() + "\n" + qrInputs[1].value.trim();
}

generateBtn.addEventListener("click", () => {
    let qrValue = getCombinedValue();
    // 检查是否至少有一个输入有内容（若要求必须填两个字段，可修改判断条件）
    if(!qrValue.trim() || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Submitting...";
    // 对内容做URL编码，避免特殊字符导致接口出错
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrValue)}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        generateBtn.innerText = "QR Code";
    });
});

// 给每个输入框绑定keyup事件
qrInputs.forEach(input => {
    input.addEventListener("keyup", () => {
        let qrValue = getCombinedValue();
        if(!qrValue.trim()) {
            wrapper.classList.remove("active");
            preValue = "";
        }
    });
});

3. 关键修改说明 #

• 获取所有输入框：用querySelectorAll代替querySelector，拿到两个输入框的DOM集合
• 内容合并逻辑：新增getCombinedValue函数，将姓名和ID用换行拼接，扫描二维码后能清晰区分两个字段
• URL编码：用encodeURIComponent处理合并后的内容，避免输入特殊字符（比如空格、中文）导致二维码生成失败
• 批量绑定事件：用forEach给两个输入框都绑定keyup事件，确保任何一个输入框清空时都能正确隐藏二维码

4. 可选优化 #

如果要求用户必须填写两个字段才能生成二维码，可以把点击事件里的判断条件改成：

if(!qrInputs[0].value.trim() || !qrInputs[1].value.trim() || preValue === qrValue) return;

这样只有当两个输入框都有内容时才会生成二维码。

内容的提问来源于stack exchange，提问作者Programming as a Hobby