為什么我的單選按鈕上的 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';
                            }
                        }
                    } 
                } 
            }

因此，我試圖讓磁貼在懸停時更改 colors，具體取決於選擇的選項。 （對於現在的示例，為了簡單起見，它只是設置為更改背景顏色，盡管我還沒有想出在懸停時進行）。 所以我試圖做的是遍歷表單組以查看是否檢查了任何內容，然后如果它移動到一個嵌套循環，該循環詢問該值是否是某種顏色。 我覺得我的邏輯是正確的，但沒有任何反應，我不確定我還能做什么。 但顯然有一個錯誤我只是沒有抓住。

https://jsfiddle.net/Jbautista1056/0gxf2Lpq/1/

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 。 不需要循環，不需要參數。