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 JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Shoaib Khan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Shoaib Khan
Front End Web Development Techdegree Graduate 21,177 Points
Posted by Shoaib Khan
.a{fill-rule:evenodd;}techdegree seal-36
Shoaib Khan
Front End Web Development Techdegree Graduate 21,177 Points

I am trying to get this JavaScript code to parse for this challenge. Please Help.

I have attached the code that I have written, and I can't seem to get the code right can you please help. Please refer to the challenge for details.

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let p = document.getElementsByTagName('button').previousElementSibling;
    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>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>

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

getElementsByTagName() returns a collection. You want just the button element that was clicked which can be referenced as e.target.

Shoaib Khan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Shoaib Khan
Front End Web Development Techdegree Graduate 21,177 Points
Shoaib Khan
.a{fill-rule:evenodd;}techdegree seal-36
Shoaib Khan
Front End Web Development Techdegree Graduate 21,177 Points

Thanks a lot Kris! I was able to figure it out. You have to use e.target.previousElementSibling.

Here is the code that I used to figure it out.

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

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

Thanks

Shoaib K. Khan