如何将无线电输入值分配给变量？

Question

我正在开发一个带有无线电输入的表单，其值为“是”和“否”。 这是代码：

<input type="radio" id="haveread" name="check" value="yes"><label for='haveread' >Yes</label>
<input type="radio" id="notread" name="check" value="no"><label for="notread" >No</label> 

我想检索已检查的无线电的无线电输入值并将其分配给名为 readStatus 的变量

这是我的代码：

const readStatus = document.querySelector('input[type="radio"]:checked');

我尝试检查 console.log 上的变量 readStatus，它返回 null。 但是，当我在 console.log 上输入 document.querySelector('input[type="radio"]:checked' （变量 readStatus 的内容）时，我得到了我正在寻找的内容，即已检查的无线电输入。 我期望变量 readStatus 也返回检查的无线电输入。我对它是如何工作的感到非常困惑，因为我基本上是 console.logging 相同的东西。

谁能告诉我我做错了什么？

编辑：

这是项目的屏幕截图，以及console.log 项目截图和控制台

Answer 1

这可以归结为几件事。首先，你什么时候用 querySelector 获取值？在页面准备好时？在带有事件处理程序的事件上？因此，当您选择其中一个选项时，单选按钮上的值会发生变化。因此，您需要向选择选项时触发的单选按钮添加事件侦听器。在所述偶数处理程序中，您可以使用查询选择器在该点获取的值来设置 readStatus var。

我建议您查看here，了解有关事件侦听器的一些信息和示例。