关于使用 javascript 查找选中的单选选项的值，我不明白什么？

Question

我现在正在学习如何将 javascript 与 html 和 css 结合使用，但我遇到了一个我认为根本不应该出现的问题。我有一个表单，我想在将来使用它来让用户选择他们想在我正在制作的一个小测试网站上看到的视频，并且我想使用一个表单来获取该输入。一开始我很难让它与复选框一起工作，但它最终起作用了。但现在我知道收音机菜单会更好，我尝试切换到它，但它无法按我想要的方式运行。

我正在sololearn.com 上学习一门关于javascript 的课程，它说您可以使用一个变量访问所有单选选项（如果它们具有相同的名称）。但现在我所做的一切都没有任何效果。这是我的代码，HTML 和 Javascript：

    <div class="card">
        <form id="form">
            <label for="video"><h1>What video would you like to watch?</h1></label>
            
            <input type="radio" id="video1" name="video" value="red">Mario Recreation</input><br>
            <input type="radio" id="video2" name="video" value="blue">Zelda Recreation</input><br>
            <input type="radio" id="video3" name="video" value="green">Castlevania Recreation</input><br>
            
            <input type="button" value="submit" onclick="video()"/>
            
            <input type="button" value="Reset Colors" onclick="undoColor()">
        </form>
    </div>

（卡片类用于某些 Flexbox 组织，这是在 body 标签中，我 100% 确定脚本已正确添加到 html 中）

function video() {
let background = document.getElementById("background");

/*Check if the checkboxes in the site are checked off, and then apply color to all the text depending on 
which is chosen*/

let form = document.getElementById("form");
let check = form.elements.video;

if(check.checked == true){
    background.style.color = check.value;
}

}

我现在没有视频文件，因此代码当前更改整个页面文本的颜色。 body 类作为 body id 元素，我更改的唯一代码是每个选择的输入类型，从复选框到单选按钮，为它们提供相同的名称，并尝试使用 .elements 中的 .elements 访问它们。 js 脚本中的变量。请帮忙！

旁注，我在学校编程这个作为一个业余项目，因为我在我的网页设计课上非常领先，而且我不知道我有什么版本的 javascript 或者我是否可以使用 jQuery，更不用说如何使用它。如果有帮助的话，我发现如果我不在 if 语句中放入 (... == true) ，它就不会工作。

作为澄清，大多数提供通用解决方案并只是说“使用 document.querySelector("input[name='video']:checked") 或其他内容的帖子对我来说不起作用。无论我如何检查该死的选项的检查状态或将它们添加为变量或其他什么，该网站根本不会承认它们甚至存在或我正在做任何事情。我发誓我正在遵循预先存在的问题的答案，例如如何获取所选单选按钮的值，但我所做的一切都没有任何效果。

Answer 1

此处

check

的值：

let form = document.getElementById("form");
let check = form.elements.video;

是一个节点列表。 这是因为有 3 个名为

video

的单选按钮。 要了解选择了哪一个单选按钮，您需要循环浏览列表并找到带有

checked===true

的单选按钮。 当您找到那个时，您可以得到它的

value

，这将是

red

blue

或

green

，具体取决于所选的那个。

逻辑应该是这样的。

  let videoRadioButtons = form.elements.video
  let color = null
  videoRadioButtons.forEach((e) => {
    if (e.checked) {
      color = e.value
    }
  })
  console.log(color)

如果您在提交时未进行选择，则颜色为

null

，否则它将是颜色值之一。