Complete the code to add a class of highlight to a <p> element that's an immediate previous sibling of the button being

Question

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

list.addEventListener('click', function(e) { if (e.target.tagName == 'BUTTON') { list.parentNode.nextSibling; list.style.className = "highlight"; console.log(list);

} });

<!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>Element Selection</p><button>Highlight</button></li> <li><p>Events</p><button>Highlight</button></li> <li><p>Event Listening</p><button>Highlight</button></li> <li><p>DOM Traversal</p><button>Highlight</button></li> </ul> </section> <script src="app.js"></script> </body> </html>

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
   list.parentNode.nextSibling;
     list.style.className = "highlight";
       console.log(list);


  }
});

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>Element Selection</p><button>Highlight</button></li>
                <li><p>Events</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
            </ul>
        </section>
        <script src="app.js"></script>
    </body>
</html>

Answer 1 · 2019-12-06T19:22:31Z

December 6, 2019 7:22pm

You won't need to reference the parent here, the paragraph is a sibling of the button. You also won't need to reference the "list" element, you can use traversal with the button as the reference.

And remember, it's the paragraph you want to change the class on, not the list.

And you won't need to "log" anything for the challenge.

Welcome to the Treehouse Community

Looking to learn something new?

Mark Wisdom Reeves

Mark Wisdom Reeves

Complete the code to add a class of highlight to a <p> element that's an immediate previous sibling of the button being

1 Answer

Steven Parker

Steven Parker