I'm not sure how to add a class to a html element via java script

Question

could I get a hint on this problem?

app.js

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let li = e.target.parentNode;

  }
});

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 · 2020-04-22T18:28:02Z

April 22, 2020 6:28pm

Hi, here is a way to check if the previousSibling of an element is a p element:

    //check if the previousElement is a p
    if(e.target.previousElementSibling.tagName == "P"){
    e.target.previousElementSibling.className = "highlight"
    }

If that helped you, please mark as best answer to indicate other students your issue is resolved!

Welcome to the Treehouse Community

Looking to learn something new?

Joel McGill

Joel McGill

I'm not sure how to add a class to a html element via java script

1 Answer

Victor Mercier

Victor Mercier