Can someone please help me with a function for my radio buttons?

Hey, I’m a complete beginner when it comes to any kind of programming language and I just started learning on here and Khan Academy. I currently have a project I’m working on while I learn to try and help me and have a good reference to fall back on in the future that I wrote and understand. I made a very basic example of what I need help with in the pen below. Can someone please show me an example of the JS function needed. Thank you.

Plain Vanilla JavaScript:

window.addEventListener('load', function() {
  var submit = document.getElementById('submit');
  submit.addEventListener('click', function(event) {
    var pages = document.getElementsByName('links');
    for (var i = 0, page = ""; i < pages.length; i++) {
      if (pages[i].checked) {
          page = pages[i].id + ".html";
    if (page !== "") {
        alert("Uncomment the code below this alert to go to " + page);
    else {
      alert("Please select a page and click submit.")

Wow thank you seeing it like this really helps me understand better!

I made a small correction on the commented code.

Thank you, I really appreciate it.

If you learn more about ES6 and arrow functions, then you could go with this version below. I took out the alert for when no button is selected to shrink the code:

window.addEventListener('load', function() {
  document.getElementById('submit').addEventListener('click', event => {
    const page = [...document.getElementsByName('links')].filter(btn => btn.checked);
    if (page.length) {
        alert(`Uncomment the code below this alert to go to ${page[0].id}.html`);

for some reason I still can’t get it to work is there any way you could view my project its hosted on codepen, i’m open to any advice you may have i’m sure my code is horrendous lol but i’m practicing. I only have the first selection page built so far but its coming up with a 404 error when I try it.

on the index page, click on the reroof img
then keep the first radio button selected and click Submit,
I want it to then load reroofShingles.html

You did not use the code I provided you above. I gave you:

var pages = document.getElementsByName('links');

and you have something else. If you are using Chrome, you need to check for errors by doing Ctrl+Shift+i. The console will show you any error you have. You have some other issues related to Mixed Content that you need to address also.

now i’m getting the alert message even though my first radio button is selected.

Look at your submit button html and then look at the js code for the submit button. Notice a difference?

I renamed the id and name in the html code

input id=“submit” class=“submit” type=“submit” value=“Submit” name=“submit”

window.addEventListener(‘load’, function() {
var submit = document.getElementById(‘submit’);
submit.addEventListener(‘click’, function(event) {
var pages = document.getElementsByName(‘links’);
for (var i = 0, page = “”; i < pages.length; i++) {
if (pages[i].checked) {
page = pages[i].id + “.html”;

You have another spelling discrepancy related to the radio buttons html vs js code for the radio buttons.

I think it would benefit you a lot to learn how to debug your JavaScript code with console.log.

For example, if a certain part of your code is not acting like you expect, you can use console.log to check the value of a variable before that section of code. If it is not what you expect it to be, then you know you must fix the code before that section.

Ok thank you, I’ll look into that and hopefully it covers it here. I still don’t see any spelling discrepancy but I’ll keep looking. Do I have my script tag right in the html? is there a problem that my submit button has the same name and id?

The problem is the name does not match for the radio button. FYI - There is no problem having the same name for the id and name attributes of the submit button.

EDIT: I originally said above that the id did not match, but I have corrected it to show name does not match. I apologize for any confusion.

var submit = document.getElementById(‘Submit’);

When I change “S” in (‘Submit’); to capitol it reloads the existing page. Is that right and I just don’t have my files organized right or something?

Read my previous comment. The problem has nothing to do with your submit button.

page = pages[i].id + “.html”;

it says the pages id + .html, well the id for the button for shingles is id=“reroofShingles” and the file for the page I wont it to load is saved as reroofShingles.html

Thanks why i’m confused I guess by that line of code it makes me think it will just add .html to the end of what ever the selected radio id is

and if I change the name of the radio button then it wont be grouped with the other buttons right? Meaning the user would be able to select more than one option. I’m sorry i’m so new at this, I’m hoping it eventually starts making more sense.

I checked your code again and you still have not fixed the issue I mentioned in the earlier post regarding the radio button name attribute being different than how you are trying to refer to the radio button name in your JavaScript code.