扫描GPS二维码能否做位置验证？双输入QR码生成JS代码求助

• 可以实现位置验证。GPS二维码一般包含经纬度坐标数据，扫描解析后，可调用设备定位API获取当前实际位置，通过Haversine公式计算两者的距离差，设定合理阈值（如50米），若距离小于阈值则判定验证通过，反之则不通过。

你的代码存在变量声明、选择器、逻辑判断等多处问题，以下是修复方案及说明：

核心问题点 #

1. 仅声明了preValue变量，但后续使用未定义的preValue1和preValue2
2. 输入框选择器错误：input1、input2不是合法的选择器语法，需根据HTML中元素的class或id调整（如.input1或#input1）
3. 点击事件的条件判断逻辑混乱，未正确处理输入为空或重复值的情况
4. 调用二维码API时使用了未定义的qrValue变量，未合并两个输入框的数据
5. 每次点击按钮都重复绑定load事件，会导致多次触发

修复后的完整代码 #

const wrapper = document.querySelector(".wrapper"),
qrInput1 = wrapper.querySelector(".form .input1"), // 修正选择器，对应HTML中input的class
qrInput2 = wrapper.querySelector(".form .input2"), // 修正选择器，对应HTML中input的class
generateBtn = wrapper.querySelector(".form button"),
qrImg = wrapper.querySelector(".qr-code img");
let preValue1 = "", preValue2 = ""; // 正确声明两个前置存储变量

// 仅绑定一次load事件，避免重复触发
qrImg.addEventListener("load", () => {
    wrapper.classList.add("active");
    generateBtn.innerText = "Generate QR Code";
});

generateBtn.addEventListener("click", () => {
    let qrValue1 = qrInput1.value.trim();
    let qrValue2 = qrInput2.value.trim();
    
    // 修正条件：两个输入都为空，或与上次值完全重复时终止执行
    if((!qrValue1 && !qrValue2) || (preValue1 === qrValue1 && preValue2 === qrValue2)) return;
    
    preValue1 = qrValue1;
    preValue2 = qrValue2;
    
    generateBtn.innerText = "Generating QR Code...";
    // 合并两个输入数据，用换行分隔（可根据需求调整分隔符）
    const combinedData = `${qrValue1}\n${qrValue2}`;
    // 用encodeURIComponent处理特殊字符，避免API请求错误
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(combinedData)}`;
    
    // 处理二维码生成失败的情况
    qrImg.addEventListener("error", () => {
        generateBtn.innerText = "Generate QR Code";
        alert("二维码生成失败，请检查输入内容");
    }, { once: true });
});

qrInput1.addEventListener("keyup", () => {
    // 两个输入都为空时隐藏二维码区域
    if(!qrInput1.value.trim() && !qrInput2.value.trim()) {
        wrapper.classList.remove("active");
        preValue1 = "";
    }
});

qrInput2.addEventListener("keyup", () => {
    // 两个输入都为空时隐藏二维码区域
    if(!qrInput1.value.trim() && !qrInput2.value.trim()) {
        wrapper.classList.remove("active");
        preValue2 = "";
    }
});

额外注意事项 #

• 确保HTML中输入框的选择器与代码匹配，若输入框用id标识，需将.input1改为#input1
• 输入数据的合并格式可根据需求调整（如用&、|等分隔符），只要扫描后能正常解析即可

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