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
Joao
Joao13mo ago
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:
const toggleBtns = document.querySelectorAll('#toggle-btn > input');

for (const btn of toggleBtns) {
btn.addEventListener('change', () => {
if (btn.textContent === 'Values') {
updateThenDisplayValues();
} else {
updateThenDisplayReflections();
}
});
}
const toggleBtns = document.querySelectorAll('#toggle-btn > input');

for (const btn of toggleBtns) {
btn.addEventListener('change', () => {
if (btn.textContent === 'Values') {
updateThenDisplayValues();
} else {
updateThenDisplayReflections();
}
});
}
lafayette
lafayette13mo ago
hm ill try it out thanks THANKS Wait so here is the new issue:
lafayette
lafayette13mo ago
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?
Joao
Joao13mo ago
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.
lafayette
lafayette13mo ago
wym keep a variable with the state? how would i go about doing that
Joao
Joao13mo ago
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
lafayette
lafayette13mo ago
lafayette
lafayette13mo ago
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
Joao
Joao13mo ago
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.
lafayette
lafayette13mo ago
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)? }
Joao
Joao13mo ago
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:
const toggleBtn = document.querySelector('#toggle-btn');

toggleBtn.addEventListener('change', (e) => {
if (e.target.value === 'Values') updateThenDisplayValues();
if (e.target.value === 'Reflections') updateThenDisplayReflections();
});
const toggleBtn = document.querySelector('#toggle-btn');

toggleBtn.addEventListener('change', (e) => {
if (e.target.value === 'Values') updateThenDisplayValues();
if (e.target.value === 'Reflections') updateThenDisplayReflections();
});
You can even use a switch statement if you ever add new tabs
lafayette
lafayette13mo ago
so i dont need another function thank the lord
Joao
Joao13mo ago
Don't need to but you would definitely benefit from doing so, make code much more organized.
lafayette
lafayette13mo ago
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
lafayette
lafayette13mo ago
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?
Jochem
Jochem13mo ago
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
lafayette
lafayette13mo ago
ill just delete the other post i gues this destroys the subpage buttons tho:
lafayette
lafayette13mo ago
No description
lafayette
lafayette13mo ago
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
lafayette
lafayette13mo ago
those lines of code makes the following js obselete?
No description
Joao
Joao13mo ago
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.
lafayette
lafayette13mo ago
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
lafayette
lafayette13mo ago
No description
Joao
Joao13mo ago
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.
lafayette
lafayette13mo ago
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
Joao
Joao13mo ago
Look into OOP for example, this would help a lot. Or use a dedicated static page builder like Astro
lafayette
lafayette13mo ago
would two separate js files not work?
Joao
Joao13mo ago
Maybe, try it.
lafayette
lafayette13mo ago
ya tha tworks nvm
Want results from more Discord servers?
Add your server