为什么我的单选按钮上的onclick事件监听器不工作了？

Question

<form id="color-options" name="FormB">
       <input type="radio" name="choice" value="blue" onclick="updateColor()">
       <label for="blue">Blue</label>
       <input type="radio" name="choice" value="red" onclick="updateColor()" >
       <label for="red">Red</label>
       <input type="radio" name="choice" value="white" onclick="updateColor()" >
       <label for="white">White</label>
       <input type="radio" name="choice" value="user" onclick="updateColor()">
       <label for="color-picker">Color Picker</label>
       <input type="color" id="color-picker"> 
     </form>
      <div id="Sketch">

        <div id="tile">

        </div>
      </div>

    let tile = document.getElementById("tile")
    let radio = document.forms[1] // //forms[1] is accessing the 2nd form because u have a form before it.
    function updateColor() {
        for (let i = 0; i < radio.choice.length; i++) {   //document.forms returns a collection of everything that has a form tag
            if (radio.choice[i].checked ) {  //form.choice = returns an array of the radio buttons, incrementing i to traverse along the array
                //checked returns a boolean if the button is checked or not; ask if the button is clicked or not and if it is follow this new loop
               for (let i = 0; i < radio.choice[i].length; i++) { //this new loop iterates and asks if the value is a certain color, and if it is change the background color
                    if (radio.choice[i].value === "blue") {
                            tile.style.backgroundColor= "blue";
                    } else if (radio.choice[i].value === "red") {
                            tile.style.backgroundColor = 'red';
                            } else if (radio.choice[i].value === "white") {
                                tile.style.backgroundColor = 'white';
                            } else if (radio.choice[i].value === "user") {
                                tile.style.backgroundColor = 'green';
                            }
                        }
                    } 
                } 
            }

所以我想让磁贴在被悬停时根据选择的选项改变颜色。(对于现在的例子来说，为了简单起见，它只是设置为改变背景颜色，尽管我还没有想出如何在悬停时改变颜色)。所以我试图做的是在表单组中迭代，看看是否有任何东西被选中，然后如果有的话，就进入一个嵌套循环，询问该值是否是某种颜色。我觉得我的逻辑是正确的，但是没有任何激活，我不知道我还能做什么。但很明显，有一个错误我没有发现。

https:/jsfiddle.netJbautista10560gxf2Lpq1

Answer 1

你不需要在表单中循环检查哪个元素被选中。使用 updateColor(this) 就足够了。

function updateColor(element) {
  const selectedColor = element.value !== 'user' ? element.value : 'green';
  const title = document.getElementById("tile");
  tile.style.backgroundColor = selectedColor;
}

#tile {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<input type="radio" name="choice" value="blue" onclick="updateColor(this)">
<label for="blue">Blue</label>
<input type="radio" name="choice" value="red" onclick="updateColor(this)" >
<label for="red">Red</label>
<input type="radio" name="choice" value="white" onclick="updateColor(this)" >
<label for="white">White</label>
<input type="radio" name="choice" value="user" onclick="updateColor(this)">
<label for="white">User</label>
<br /><br />
<div id="tile"></div>

Answer 2

你也可以使用CSS选择器来抓取 "选中 "的单选框，方法是： document.querySelector('#color-options > input:checked'). 然后，你可以通过添加以下内容来获取选中的单选按钮的值 .value 到最后。

所以，总的来说，。document.querySelector('#color-options > input:checked').value. 不需要循环，不需要参数。