Как перебирать радиовходы и применять изменения к каждому из них? - PullRequest
Новая
       37

Как перебирать радиовходы и применять изменения к каждому из них?

0 голосов
/ 05 мая 2020 

let tile = document.getElementById("tile")

   //see if a button is checked by creating a loop to iterate through the radio buttons  
for (let i = 0; i < document.forms.choice.length; i++) {  
    if (document.forms.choice[i].checked ) {  //form.choice = returns an array of the radio buttons
        //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 < document.forms.choice.length; i++) { //this new loop iterates and asks if the value is a certain color, and if it is change the background color
            if (document.forms.choice[i].value === "blue") {
                    tile.style.backgroundColor = 'blue';
            } else if (document.forms.choice[i].value === "erase") {
                    tile.style.backgroundColor = 'white';
                    }
                }
            }
        }

Итак, я пытаюсь заставить плитку менять цвет при наведении курсора в зависимости от того, какой вариант выбран. (Для примера прямо сейчас он просто настроен на изменение цвета фона для простоты, хотя я до сих пор не понял, как это сделать на любом этапе). Итак, я попытался выполнить итерацию по группе форм, чтобы увидеть, проверено ли что-нибудь или нет, а затем, если он перейдет к вложенному l oop, который спрашивает, имеет ли значение определенный цвет. Мне кажется, что лог c у меня внизу, но ничего не активируется, и я не уверен, что еще я могу сделать. Но очевидно, что это ошибка, которую я просто не улавливаю. 


<form id="color-options" name="form">
       <input type="radio" name="choice" value="blue">
       <label for="blue">Blue</label>
       <input type="radio" name="choice" value="">
       <label for="rainbow">Rainbow</label>
       <input type="radio" name="choice" value="white">
       <label for="erase">Eraser</label>
       <input type="radio" name="choice" value="user">
       <label for="color-picker">Color Picker</label>
       <input type="color" id="color-picker"> 
     </form>
      <div id="Sketch">

        <div id="tile">

        </div>
      </div>

JSfiddle: https://jsfiddle.net/Jbautista1056/83scu1ra/2/

...