JavaScript JavaScript and the DOM Traversing the DOM Sibling Traversal

Begana Choi
Begana Choi
Full Stack JavaScript Techdegree Student 9,433 Points
Posted by Begana Choi
Begana Choi
Full Stack JavaScript Techdegree Student 9,433 Points

why my code makes error? (add a class name)

here is my code and it says I have error that

There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'p.className = 'highlight'')

and I have no idea why it's wrong.. please help meee thank you!!

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

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let button = event.target;
    let p = button.previousElementSiblings;
    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,335 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,335 Points

It is just previousElementSibling without the s at the end