JS新手求助：QR Code嵌入div后显示即消失故障排查

问题根源 #

• 按钮类型为submit，点击后会触发表单默认提交行为，导致页面刷新，刚生成的二维码被刷新清除。
• makeCode函数定义在按钮点击事件的回调内部，外部的blur和keydown事件无法访问该函数，会引发"函数未定义"的错误。
• 每次点击按钮都重新创建QRCode实例，可能造成资源浪费和渲染冲突。

解决方案 #

1. 取消表单默认提交：将按钮type从submit改为button，或在点击事件中阻止默认行为。
2. 调整函数作用域：把makeCode函数和QRCode实例初始化移到全局作用域（$(document).ready根层级），确保所有事件都能调用。
3. 复用QRCode实例：只初始化一次QRCode对象，后续直接调用makeCode更新内容。

修改后的完整代码 #

HTML代码

<div class="row mb-3" id="qrcode">
</div>
<div class="row mb-3">
   <label class="col-sm-10 col-form-label" for="basic-default-company">Add Label to QR Code</label>
   <div class="col-sm-10">
      <input
         type="text"
         class="form-control"
         id="basic-default-company"
         placeholder="Vehicle Reg#"
         />
   </div>
</div>
<div class="row justify-content-end">
   <div class="col-sm-10">
      <button type="button" id="generateqr" class="btn btn-primary">Generate QR</button>
   </div>
</div>

JavaScript代码

$(document).ready(function() {
    // 初始化QRCode实例，全局复用
    var qrcode = new QRCode("qrcode");
    
    // 全局定义makeCode函数，所有事件均可调用
    function makeCode () {      
        var elText = document.getElementById("basic-default-company");
    
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
    
        qrcode.makeCode(elText.value);
    }

    $(document).on("click" , "#generateqr" , function(){
        makeCode();
    });

    $("#basic-default-company")
        .on("blur", function () {
            makeCode();
        })
        .on("keydown", function (e) {
            if (e.keyCode == 13) {
                makeCode();
            }
        });
});

修改后，点击按钮不会触发页面刷新，二维码可稳定显示；输入框失去焦点或按回车键时，也能正常更新二维码内容，不会出现函数未定义的错误。

内容的提问来源于stack exchange，提问作者Smitty's