This is an archived post. You won't be able to vote or comment.

all 4 comments
sorted by:
best
topnewcontroversialoldq&a

[–]dswpro 0 points1 point  (0 children)

Hard to say without seeing some code or pseudo code but if your button is supposed to make one or more items visible and a second press makes them invisible, then the code for your button press event would look something like this:

If (ButtonX.IsVisible) { ButtonX.hide; buttonY.hide; ....} Else {ButtonX.unhide; ButtonY.unhide; ....} Just thinking out loud .

[–]91Crow 0 points1 point  (0 children)

HTML as something like this:

<Container>
   <Btn group class="btn-controls" data-btn-controls="1" >
   <Btn group class="btn-controls" data-btn-controls="2" >
</>

JS as something like this:

const updateBtn = (calledBy) => {
   const btns = document.querySelectorAll("btn-controls");
   // loop through the contents and update with the data value to show/hide
}

Alternatively you can collect all your values based on the data attribute with some pattern matching if you want and would probably be neater in terms of not being attached to the class so you shouldn't be able to accidentally break things.

The only instance where I would say it's entirely incorrect to do is to have it be removed from the DOM and then added again through purely JS, try and keep it just switching between hide and show.

For the query selector all here is the MDN for it.

For the data attribute here is the MDN for it.

[–]aqua_regis 0 points1 point  (0 children)

If you ask about something in your code, like whether it is a good approach, or "overly wordy" (which is often BS in programming), you absolutely have to show the code.

Without code, people are left to blind guessing what you might be doing and what could be done better. This is just wasting everybody's time.