未捕获类型错误：无法读取 null 的属性（读取“值”）

Question

当尝试控制台记录我在事件函数中声明的变量时，我的控制台正在回显此错误

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at HTMLButtonElement.wuTangForever (main.js:16:76)

我尝试制作一个带有无线电输入和属性的表单。

<p>Pepsi or Coke?</p>
            <input type="radio" id = "pepsi" name = "soda" value = "1">
            <label for = "">Pepsi</label>
            <input type="radio" id = "coke" name = "soda" value = "2">
            <label for = "">Coke</label>

在我的 JavaScript 中，我有以下代码：

const sodas = Number(document.querySelector('input[name = soda]:checked').value)

当我console.log（苏打水）或执行任何操作时，会出现消息错误。我检查了我的脚本标签，因为我看到其他人也遇到了同样的问题。这并没有解决问题。不知道大家有没有什么想法？

我想要做的是获取检查的无线电输入的值，将该值转换为数字以放入数组中。

Answer 1

如果未找到匹配项，

querySelector

可能会返回 null，因此您的代码应该处理这种情况。如果尚未选择任何内容，情况似乎就是这样。

使用 Optional Chaining 运算符可能就足够了。

const sodas = Number(
  document.querySelector('input[name = soda]:checked')?.value
);