TOGGLE BUTTON HELP
code: https://codepen.io/gsadopkgj/pen/OJdyyJa
ISSUE: when you click on either "Reflections" or "Values" at the top the visual toggle is incorrect. if you keep clicking multiple times on either "Values" or 'Reflections" the content toggles back and forth but visually, "Values" or 'Reflections' is always "selected".
I want the buttons content to only switch when you click on either (reflections or values); not to toggle when u click on one of them repeatedly... how do i fix this)
31 Replies
Instead of listening for a click event, you can listen for change event or in other words, when the radio buttons change state. Something like this seems to work:
hm
ill try it out thanks
THANKS
Wait
so here
is the new issue:
the column headers aren't changing
only the buttons are
do i have to create a seaprate function
for column headers
and call that?
Although I have it inside the updateThenDisplay functions to change the column headers?
I see, the problem is that both inputs are actually changing and it invokes both functions. It depends how you want to handle this, this was just a suggestion. You can try to keep a variable with the state and use that as the source of truth to know which content to display. You are already using JavaScript for this so that would be my preferred approach.
wym keep a variable with the state?
how would i go about doing that
Having a separate variable that toggles when you click on either of the buttons, checks which one is checked, and updates accordingly. This variable should be outside of the callback fn
https://codepen.io/gsadopkgj/pen/OJdyyJa if u relook at the codepen
i added something
but its meant to also change the justification paragraph as well as the column headers too
(the toggle btn)
this would be in the js right?
would this be a function in itself
like
checkToggle() or something
checkToggleState()
i don't get it
Yes, something like that would be a good approach: keeping track of which current state the website is so that you know how to render it. But of course the buttons already do this, so just tune the callback function to the change event a bit to know which one to ignore since both buttons would be updated.
when u say callback function ur refering to teh event listener right?
something like this: ??
function checkToggleState(){
const ignoreEvent=
// keeps track of state of website so you know how to render - buttons already do this
// tune callback function to know which event to ignore since both buttons would be updated
if updateThenDisplayValues() -->(values) ignore Event(reflections)?
}
Yes, the event listener.
Actually, you can do it much simpler. I made a mistake, as I thought both inputs were triggering a change event but only the one that is now checked is
So you can do something like this:
You can even use a switch statement if you ever add new tabs
so i dont need another function thank the lord
Don't need to but you would definitely benefit from doing so, make code much more organized.
Do u know how i would make it so that the description default js line only applies to the subpages and not the main index.html page?https://codepen.io/gsadopkgj/pen/BaMoopE
right now in the index html page header 2
displays 'Description' even tho it shld be
'why i reflect'. This is because of the following line in the javascript:
"let currentOption = 'Description'; // default option"
I need the (currentoption stuff = Description) line; to only be applicable on the other html subpages not the index.html page.... How do I do this? Do I need to use location.pathname to fix this?
either delete your other post or just link to it here: https://discord.com/channels/436251713830125568/1167038760140161074
also, it's better to write your titles in regular case instead of all caps, all caps can be harder for people to read
ill just delete the other post i gues
this destroys the subpage buttons tho:
there is meant to be those three buttons at the bottom there ( 'justification, 'lessons learned' and 'goals)
but when u add in that js
all those buttons dissapear
those lines of code makes the following js obselete?
Well I don't know how the rest of the site is structured... but this is a good example of why using functions makes the code more organized and robust.
the rest of the js as u can see in the codepen has nothing to do with that add event listener function tho? The js for the subpage has it's own event listener
That's what I mean, it has nothing to do with it and yet it breaks other stuff. I would consider stopping at this point while it's still early in the development process to make sure you are making things organized, rather than stitching patches that may or may not cause issues down the road.
shld i make two separate js files?
and have one js file for the index
and another for teh subpage
this way it will ifx this issue
Look into OOP for example, this would help a lot. Or use a dedicated static page builder like Astro
would two separate js files not work?
Maybe, try it.
ya tha tworks
nvm