Uncaught TypeError报错咨询：无法读取null的value属性，二维码生成失败

错误含义 #

Uncaught TypeError: Cannot read null property (reading 'value')

这个错误的意思很直接：你尝试读取一个null对象的value属性。null表示你通过document.getElementById()获取DOM元素时，没找到对应id的元素，结果拿到了null，这时再去访问它的value属性，浏览器就会抛出这个报错。

代码里的问题分析 #

1. DOM加载顺序问题
   最常见的原因是你的JS代码在页面DOM元素加载完成前就执行了。比如把JS代码放在<head>标签里，或是<body>标签的开头位置，此时浏览器还没渲染出qrText、qrImage这些元素，getElementById自然拿不到目标元素，返回null。

2. 代码笔误
   第一部分代码的setTimeout回调里，你写了rText.classList.remove("error");，这里的rText是笔误，应该是qrText，否则后续也会触发新的报错。

3. 元素调用错误
   第二部分代码里的new QRCode(document.getElementById(qrImage), qrInput);是错误写法：qrImage已经是你之前通过getElementById获取到的元素对象，不需要再用document.getElementById()包裹它，直接传入qrImage即可。如果qrImage本身是null，这行代码还会引发新的问题。

修复建议 #

1. 确保JS在DOM加载完成后执行
   把JS代码放在<body>标签的最后位置，或者用DOMContentLoaded事件包裹代码：

   document.addEventListener('DOMContentLoaded', function() {
     // 你的所有JS代码放在这里
   });
   

2. 修正笔误
   把setTimeout里的rText改成qrText，同时建议添加延迟时间，让错误状态能被看到：

   setTimeout(() => {
     qrText.classList.remove("error");
   }, 1000);
   

3. 修正元素调用错误

   document.getElementById("qrButton").addEventListener("click", function () {
     let qrTextElement = document.getElementById("qrText");
     // 先检查元素是否存在
     if (!qrTextElement) return;
     let qrInput = qrTextElement.value;
     if (!qrInput) return;
     new QRCode(qrImage, qrInput);
   });
   

4. 额外防御性检查
   每次获取DOM元素后，先检查是否为null，避免报错：

   let qrText = document.getElementById("qrText");
   if (!qrText) {
     console.error('找不到id为qrText的元素');
     return;
   }
   

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