Adding An "All" Button to the classList()

PiperBaron commented 3 years ago

Hey, everyone!

I've implemented the code from our second Javascript exercise here, (if you scroll down) you can toggle the different lines sung by each member. Thinking on it, I realized I really wanted to put in an "All" button, which would toggle every member's lines all at once.

But, I've been having trouble actually writing the code to get this to work. I have... something kind of close, but it's rather broken. I added this to the JS:

            case "Alltoggle": {
      for (e=0; e < AllLines.length; e++)
      {AllLines[e].classList.toggle("on")}
             for (var checkbox of checkboxes) {
       checkbox.checked = this.checked;}
       var e;
       };
      break;

If you click the All button in its current state, it applies the "on" class to every song_line and checks each box (which won't happen without that checkbox part of the code), which is good! But... if you happen to toggle off the some of the other boxes while the All box is still toggled, and then toggle the All box off those other boxes will turn on again! It's hard to explain, but basically this code is only really functional if just the All box is used, and no other box is touched at all. That'd be very confusing for users, right?

This isn't a super pressing issue, but I'd really like to get it working. This song has 13 different people on the track, and clicking all 13 buttons just to see every lines seems a bit ridiculous!

If anyone has any advice, I'd greatly appreciate it!

ebeshero commented 3 years ago

@PiperBaron We'll need to see the code that you're selecting with your AllLines variable. My guess is that there's a mismatch in collecting them all. The classList() toggle needs to add the class of "on" to all the lines, and then remove them all when you toggle it off...Let's take a look at all the code for this if you can send us to your HTML file and the JS file?

ebeshero commented 3 years ago

@PiperBaron I just realized something about this issue. After you have toggled ALL to be on, you need to remove "on" before you can isolate just one to turn on. So you need to toggle OFF before you can toggle the individuals on, right?

PiperBaron commented 3 years ago

@ebeshero

I pushed the new All-button-version of the files to both the GitHub and Newtfire web-space: here's the new version of the page. The HTML file is here and the JS file here.

Ideally, the All button would "turn on" every other box in such a way that the user could un-toggle the other boxes with no issue. For example, in the BTS song, the user would be able to click "All," then un-toggle the "Non-Member" button so they could see only the lines sung by the 7 BTS members, without the whole thing getting messed up like it is now.

I'm not really sure how to do that, so we can settle on toggling off everything before the user can toggle on the individuals.

ebeshero commented 3 years ago

@PiperBaron I thought my reply posted yesterday, but I see it didn't! Yikes. Okay. Looking at your code for the HTML, CSS, and JS was definitely helpful. Here's the issue: You're juggling some layers of classes here, right? The All-toggle is working with one value only, and it's adding "on" to your series of @class values on the basis of just one value.

Suppose we remove the "on" value by toggling one of the vocalists on the list, but we keep "All" selected. JavaScript's logic will remove the "on" value for that one vocalist. Then if we toggle "All" again, there's an interesting effect! we remove highlighting from everyone other than the vocalist we selected, and that vocalist gets togged "on" so it's the only one showing (even though we'd de-selected that one from the list earlier!

What this means is the "switchboard" is overly complicated. It's complicated for a lot of reasons, not just for the toggling. You have lots of song files you've marked, each with a distinct array of vocalists to output with distinct styling. I'm not sure you want to be "hard-coding" so many very different JS files. Is there a simpler way you can manage this?

This is what occurs to me based on your posting here. What if you:

output all the diverse styling (and CSS) for the individual vocalists because you can (if you wish to be able to illuminate this data in the HTML and find it interesting and useful).
Write one JS file that will work over all of the song files, regardless of which group / vocalists are performing. That might mean just toggling the color display for "Members" vs. "Nonmembers"(?) Or try organizing your vocalists into larger categories that can help illuminate a collection of them at once?
You may have other ideas here!

We could take this further, if you still want the capacity to click on each and every vocalist's name in a fieldset and see their portions of the song lyrics: What we'd want to do is collect a JavaScript array, and we can study up on how to do this--so JS collects all the values of a set of elements in your HTML document, and responds to the array in a function...But you're still giving your visitors lots of complex options to choose from, when maybe it's sufficient to share a legend of color codes, and select the highlights to be visible in groups. What do you think?

newtfire / digitProjectDesign-Hub

Adding An "All" Button to the classList() #32