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