Kevin Powell - Community•14mo ago

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)

asdlfkj

CodePen

toggle button

...

31 Replies

Joao•14mo 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();
    }
  });
}

lafayetteOP•14mo ago

hm ill try it out thanks THANKS Wait so here is the new issue:

lafayetteOP•14mo ago

https://codepen.io/gsadopkgj/pen/OJdyyJa

asdlfkj

CodePen

toggle button

...

lafayetteOP•14mo 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•14mo 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.

lafayetteOP•14mo ago

wym keep a variable with the state? how would i go about doing that

Joao•14mo 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

lafayetteOP•14mo ago

https://codepen.io/gsadopkgj/pen/OJdyyJa if u relook at the codepen

asdlfkj

CodePen

toggle button

...

lafayetteOP•14mo 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•14mo 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.

lafayetteOP•14mo 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•14mo 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

lafayetteOP•14mo ago

so i dont need another function thank the lord

Joao•14mo ago

Don't need to but you would definitely benefit from doing so, make code much more organized.

lafayetteOP•14mo 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

asdlfkj

CodePen

location.pathname?

...

lafayetteOP•14mo 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•14mo 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

lafayetteOP•14mo ago

ill just delete the other post i gues this destroys the subpage buttons tho:

lafayetteOP•14mo ago

https://codepen.io/gsadopkgj/pen/zYevroa

asdlfkj

CodePen

subpage btns dissapear due to js

...

lafayetteOP•14mo ago

lafayetteOP•14mo 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

lafayetteOP•14mo ago

those lines of code makes the following js obselete?

Joao•14mo 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.

lafayetteOP•14mo 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

lafayetteOP•14mo ago

Joao•14mo 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.

lafayetteOP•14mo 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•14mo ago

Look into OOP for example, this would help a lot. Or use a dedicated static page builder like Astro

lafayetteOP•14mo ago

would two separate js files not work?

Joao•14mo ago

Maybe, try it.

lafayetteOP•14mo ago

ya tha tworks nvm

Gaming

Programming

TOGGLE BUTTON HELP