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.