I'm completely stuck and don't know where to start...

Question

I don't have a good grasp on the items that were taught in this course, and have been stuck on this challenge for quite some time. Looked back at the previous videos and I'm barely able to understand what's going on.

app.js

var list = document.getElementsByTagName('ul')[0];
const highlight = document.getElementsByClassName('highlight');
const button = document.getElementsByTagName('button')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    button.previousElementSibling;
  }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
            <ul>
                <li><p class="highlight">Element Selection</p><button>Highlight</button></li>
                <li><p class="highlight">Events</p><button>Highlight</button></li>
                <li><p class="highlight">Event Listening</p><button>Highlight</button></li>
                <li><p class="highlight">DOM Traversal</p><button>Highlight</button></li>
            </ul>
        </section>
        <script src="app.js"></script>
    </body>
</html>

Answer 1 · 2020-08-12T11:24:24Z

August 12, 2020 11:24am

Hey Brennen Bactista,

In your above code you have created a class attribute inside <p> elements and selected that element in js using a getElementById.

But in this challenge, you should dynamically insert class attribute to <p> elements using previousElementSibling property.

 var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    e.target.previousElementSibling.className = 'highlight';
  }
});

In the above code, when the <button> is clicked it'll look for its immediate previous sibling which is <p> element and adds a class of highlight`.

Hope this helps!

Happy Coding!

Welcome to the Treehouse Community

Looking to learn something new?

Brennen Bactista

Brennen Bactista

I'm completely stuck and don't know where to start...

1 Answer

Rabin Gharti Magar

Rabin Gharti Magar