Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by steven swensen
steven swensen
7,926 Points

can you use a switch statement with classes

JavaScript

const listUl = document.querySelector('div#pro245 ul');
listUl.addEventListener('click',  y => {
    if (y.event.target.tagName == 'BUTTON') switch(y.target.class) {
        case 'remove' : let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li);
    }
});

HTML

            <div class="all" id="pro245"><!-- parentNode -->
                <h1>parentNode</h1>
                <ul>
                    <li>Bears
                    <button class="up">up</button>
                    <button class="remove">Remove</button>
                    </li>
                    <li>lions
                    <button class="up">up</button>
                    <button class="remove">Remove</button>
                    </li>
                    <li>Elk
                    <button class="up">up</button>
                    <button class="remove">Remove</button>
                    </li>
                    <li>Zebra
                    <button class="up">up</button>
                    <button class="remove">Remove</button>
                    </li>
                </ul>
            </div>

This is not working with a switch i can get it to work with another if statement but with a switch statement no dice.

3 Answers

Matt Brock
Matt Brock
28,330 Points

Hey Steven, you most certainly can use class names with a switch statement. However, I noticed a few things wrong in your script that were breaking things:

  1. You were referencing y.event which was breaking initially because your y parameter is already being passed through to the function as the event itself. No need to call that again.
  2. You were calling the property class on the event's target, but that should be className.
  3. It wasn't breaking anything, but you referenced event in your switch statement instead of your own y parameter. Should keep those consistent.

Here's the working code:

const listUl = document.querySelector('div#pro245 ul');
listUl.addEventListener('click', y => {
  if (y.target.tagName.toUpperCase() === 'BUTTON') {
    switch (y.target.className.toUpperCase()) {
      case 'REMOVE' :
        let li = y.target.parentNode;
        let ul = li.parentNode;
        ul.removeChild(li);
        break;
      default :
        // Add some default behavior to fall back on;
        // probably whatever needs to happen when the
        // user clicks on the 'up' button.
    }
  }
});

I made a quick demo on Codepen as well: https://codepen.io/mattpbrock/pen/rYMQmY?editors=1010. Let me know if you have any questions!

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

Thanks Matt you are the man. and way cool profile pic. you kind of look like Roy Orbison, a musical hero in my eyes. ha ha thanks again and have a good one.

Matt Brock
Matt Brock
28,330 Points

So glad to help! Haha I've never gotten Roy Orbison before! Jon Cryer, yes, The Big O, no...

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

ha ha people have said i look like napoleon dynamite, that is a big O NO you did not ha ha, but i am married with a kid now so i could care less what people think I look like now.