How can I target the p tag and add an element to it?

Question

The following code I added to line 5 is not working.

document.getElementsByTagName('p').className = "highlight";

app.js

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

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

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

Answer 1 · 2017-07-04T21:01:49Z

July 4, 2017 9:01pm

The 'getElementsByTagName('p')' returns a nodelist of elements. I think you then have to loop through that list using a for loop, for example. Then you can apply your classname to each item in the array.

Answer 2 · 2017-07-04T21:09:01Z

July 4, 2017 9:09pm

the simplest way would be to create a variable to store the previous sibling, then add the class to that like so;

let p = e.target.previousElementSibling;

p.classList.add('highlight');

Welcome to the Treehouse Community

Looking to learn something new?

Arum Galadima

Arum Galadima

How can I target the p tag and add an element to it?

2 Answers

Kristian Woods

Kristian Woods

Richard Scott

Richard Scott