Need help with radio button and focus

JavaScript
1

I am taking a couple steps back here. I am trying to get the radio buttons to toggle the options. Right now, when the user selects either button the option gets styled correctly, but I want to add the functionality that if the user selects the other option without going back it gets styled like the push the button. When the buttons get pressed the button sets a radio option to true, so I came up with this

const checkToggle = () => {
  if(optionToggle.checked == true){
    pledgeInfoTwo.style.display = "none";
    pledgeBorder.style.border = "1px solid #3DB4AB";
    optionToggleTwo.checked = false;
    console.log(optionToggle);
  }else if (optionToggleTwo.checked == true){
    pledgeInfo.style.display = "none";
    pledgeBorderTwo.style.border = "1px solid #3DB4AB";
    optionToggle.checked = false;
  } else {
      console.log("other");
  }
}

However, I am realizing these variables are not getting updated in the function

let optionToggle = document.querySelector("#bamboo-stand");
let optionToggleTwo = document.querySelector("#black-edition");

const pledgeButtonOne = () => {
    console.log(optionToggle);
    pledgeButton.addEventListener("click", () => {
        optionToggle.checked = true;
    })
    console.log(optionToggle.checked);
}

const pledgeBtnTwo = () => {
    console.log(optionToggleTwo);
    pledgeButtonTwo.addEventListener("click", () => {
        optionToggleTwo.checked = true;
    })
}

Not sure why. Here is pen

2

I’m really not sure I understand your question but you do have to uncheck the checkbox that isn’t being checked otherwise both will be selected when switching between them.

You also have to call checkToggle from inside the handler (I assume that is the point of the function).

const pledgeButtonOne = () => {
  console.log(optionToggle);
  pledgeButton.addEventListener("click", () => {
    optionToggle.checked = true;
    optionToggleTwo.checked = false;
    checkToggle();
  });
};

const pledgeBtnTwo = () => {
  console.log(optionToggleTwo);
  pledgeButtonTwo.addEventListener("click", () => {
    optionToggleTwo.checked = true;
    optionToggle.checked = false;
    checkToggle();
  });
};

The way you are calling all the functions at the bottom is not really how you want your logic flow to work. You trigger code using events and call functions from within each other either causing side-effects or passing data out of and into functions.

I’d also suggest using an actual form and looking at the FormData API which lets you write cleaner and more declarative code.

3

I was curious about that. Its been a while, and I am not sure what language it was, but I remember functions being called at the top of the file, and the functions were underneath. Can not do that here because you cant call before the function is initialized. So, I was not sure where those functions would go as there are some functions that arent being called inside other functions.

I am not sure how to explain it to be honest, you can see that when the modal is opened with the button the user selected it adds the border and sets the radio to true. On that same modal if you select the other radio button is should set that to true and the border should then go over to the new selection. At the same time the border should disappear, and the button hidden from the first selection as it would now be false.

4

Right now there isn’t any logic for switching between pledges inside the modal. You have to add an event listener to the actual checkboxes and not just the buttons.

You also have to reset the border when setting the style. So when you set pledgeBorder you reset pledgeBorderTwo and vice versa.

Not sure if this is what you want?

BTW, I would also highly suggest you name your variables so they better identify what they contain.

1 Like
5

Yes! it did not occur to me to change the border back to the light grey when the options changed. That was driving me crazy. Appreciate it!

Also, how would you suggest handling the logic flow as you mentioned. Since, it is not the best to have all the functions at the bottom?

6

I updated the pen to have logic for the buttons (I think that is what you want anyway).

I would personally likely rewrite it using the FormData API.

Forms are way harder than they look. They quickly can get out of hand and you have to be careful to handle all the different states the form/form elements can be in. They are mostly event-driven so everything is triggered using events and handler functions. Then you can have “stand-alone” utility functions as well which lets you organize the code better.

Learning flow control and state management are two of the main things you have to learn and get better at. It will come with time but will remain two of the harder things to deal with no matter how long you have coded. Form logic is actually a good place to practice it.

7

I got that figured out, but I appreciate it!
I will keep at it then! Got a long way to go, but I am better than I was a month ago. Appreciate the help.

8

It’s always nice when you can see some progress. It’s easy to get discouraged so take all the wins you can get.

Just don’t look too much for an end goal, enjoy the ride because it never really ends.

No problem, happy to help. If you are done with my pen I will delete it, just let me know.

9

Yes, I am done with it. Thanks again.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.