0

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';
                    }
                }
            }
        }

So I'm trying to get the tile to change colors when it is hovered on depending on which option is selected. (For the example right now it's just set to change the background color for simplicity purposes although I still haven't figured out to do it onhover). So what I tried to do was iterate over the form group to see if anything is checked or not, and then if it is move on to a nested loop which asks if the value is a certain color. I feel like i have the logic down right, but nothing activates and I'm not sure what else i can do. But obviously there's a mistake I'm just not catching.


<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/

Jonas
  • 121,568
  • 97
  • 310
  • 388
Josemari Bautista
  • 77
  • 7
  • 1
    Here some suggestions: document.forms returns a list, so, in your case, you need to access item [1]; after submitting your form, the page is reloaded and your js execute without any checked input, you can prevent the submit returning false and then you can include your loop in a function, recalled on submit. [Here](https://pastebin.com/d4efEGZt)'s a basic idea, hope it helps. – WoAiNii May 05 '20 at 20:11
  • is there a way to apply the changes without having to click the submit button? Ideally I'd want the user to just check one of the options without having to submit it. – Josemari Bautista May 05 '20 at 23:00
  • I tried adding onclick = updateColor() to each of the radio buttons but nothing changes. – Josemari Bautista May 05 '20 at 23:21
  • Try to look at this [question](https://stackoverflow.com/questions/8922002/attach-event-listener-through-javascript-to-radio-button), I would follow @xbonez answer – WoAiNii May 06 '20 at 06:44

0 Answers0