Html Question posted in
Some basic documentation can be found here.

Html – What am I not understanding about finding the value of a checked radio option with javascript?

I’m learning how to use javascript with html and css right now, and I’m having a problem that I don’t think I should be at all. I have a form that I want to use in the future to have the user select a video they want to see on a little test website I’m making, and I wanna use a form to get that input. I struggled at first to make it work with checkboxes, but it eventually functioned. But now that I know a radio menu would work better, I tried swapping to that and it won’t function how I want.

I’m following a course on sololearn.com for javascript, and it says that you can access all of the radio options with one variable should they have the same name. But nothing I’m doing is having any effect at all right now. Here’s my code, HTML and then 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>

(The card class is used for some flexbox organization, this is in the body tags and I am 100% sure the script is properly added into the 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;
  }
}

I don’t have video files right now, so the code currently changes the color of the whole page’s text. The body class as the body id element, and the only code I’ve changed is the type of input each choice was from a checkbox to a radio button, giving them all the same name, and trying to access them using .elements in a variable in the js script. Please help!

Side note, I’m programming this in school as a side project because I’m very ahead in my web design class, and I don’t know what version of javascript I have or if I can use jQuery, let alone HOW to use it. If it helps, I’ve found that if I don’t put (… == true) in my if statements, it won’t work.

As clarification, most posts which give a general solution and just say "use document.querySelector("input[name=’video’]:checked") or something" aren’t working for me. No matter how I check for the damn options’ checked status or to add them as variables or whatever, the website won’t at all acknowledge that they even exist or that I’m doing anything. I swear I’m following the answers to pre-existing questions such as How to get the value of a selected radio button, but nothing I’m doing has any effect.

Tags:

2

Answers


  1. 0

    The value for check here:

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

    is a node list. That is because there are 3 radio buttons with the name video. To know which one of the radio buttons is selected you need to loop through the list and find the one with checked===true. when you find that one, you can get it’s value which will be red blue or green depending on the one selected.

    The logic would be along these lines.

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

    Where color is either null if you haven’t made a selection at the time of submit, or it will be one of the color values.

    Login or Signup to reply.
  2. 0

    simply

    const
  formElm = document.querySelector('#form')
, bgElm   = document.querySelector('#background')
  ;
function video() 
  {
  bgElm.style.color = formElm.video.value
  }                 //        ^^^^^   use form's elements Name
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search