使用QRCode.js生成二维码失败无报错，寻求问题排查方案

问题重现 #

你用QRCode.js尝试生成二维码，写完代码后页面只显示输入框，二维码区域是空的，控制台也没报错对吧？我仔细看了下你提供的代码，很快就找到了问题所在。

问题分析 #

你的代码里有两个核心问题导致二维码无法生成：

1. 带src属性的script标签不能包含内部代码：浏览器遇到带有src的<script>标签时，会直接加载外部脚本文件，完全忽略标签内部写的代码。所以你写的var qrcode = new QRCode("qrcode");这段代码根本没被执行。
2. 缺少生成二维码的关键调用：就算成功实例化了QRCode对象，也需要调用它的makeCode()方法传入要编码的内容，才能真正生成二维码。

修复后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <input id="text" type="text" value="https://hogangnono.com" style="width:80%" /><br /> 
    <div id="qrcode"></div> 

    <!-- 先单独引入外部QRCode脚本 -->
    <script type="text/javascript" src="javascripts/qrcode.min.js"></script>
    <!-- 再写自定义逻辑的script标签 -->
    <script type="text/javascript">
        // 实例化QRCode对象，绑定到指定的DOM容器
        var qrcode = new QRCode("qrcode");
        
        // 封装二维码生成函数
        function generateQRCode() {
            var inputText = document.getElementById("text").value;
            qrcode.makeCode(inputText);
        }
        
        // 页面加载完成后自动生成初始二维码
        window.onload = generateQRCode;
        
        // 可选：监听输入框内容变化，实时更新二维码
        document.getElementById("text").addEventListener("input", generateQRCode);
    </script> 
</body> 
</html>

关键修复点说明 #

• 拆分script标签：把引入外部JS和自定义代码分成两个独立的<script>标签，确保自定义逻辑能被浏览器正常执行。
• 添加makeCode()调用：通过这个方法传入输入框的文本内容，触发二维码的生成渲染。
• 新增实时更新逻辑（可选）：给输入框添加input事件监听，输入内容变化时自动重新生成二维码，提升交互体验。

这样修改后，页面加载完成就会自动生成对应内容的二维码，你也可以在输入框里修改内容，二维码会实时同步更新。

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