I need help with a javascript function. What I am failing my function with is The function addButtonListeners should add a click listener that calls the toggleComments function for all button elements found within the main element. It isn't recognizing my click listener as selecting everything from the main element. There is a test you can see if it passes on gtlich known as Ascme Blogs
I need help with a javascript function. What I am failing my function with is The function addButtonListeners should add a click listener that calls the toggleComments function for all button elements found within the main element. It isn't recognizing my click listener as selecting everything from the main element.
There is a test you can see if it passes on gtlich known as Ascme Blogs
This is what I have so far:
function addButtonListeners() { const buttons = document.querySelectorAll('main button') buttons.forEach(button => { const postId = button.dataset.postId; button.addEventListener('click', () => { toggleComments(event, postId); }); }); return buttons; }
empty toggleComments function:
function toggleComments(event, postId){
}
toggleComments function is just an empty function for now.
Selects all buttons nested inside the main element
b. If buttons exist:
c. Loop through the NodeList of buttons
d. Gets the postId from button dataset postId
e. Adds a click event listener to each button (reference addEventListener)
f. The listener calls an anonymous function (see cheatsheet)
g. Inside the anonymous function: the function toggleComments is called with the event and postId as parameters
h. Return the button elements which were selected
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project: Acme Blogs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.1.3/mocha.css"
integrity="sha512-Ytt2foRGKdIInPXwyS3gxRvfTv4n2wi7uB7neCLH1LjExT+PKBeQu6LNVB4QpHaJqx7m2btagBs4kqxYC1QNFg=="
crossorigin="anonymous" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="https://serene-roentgen-345cd7.netlify.app/css/finalProject.min.css" />
<script src="js/main.js" defer></script>
<script src="https://serene-roentgen-345cd7.netlify.app/tests/finalProject.min.js" defer></script>
<script src="https://serene-roentgen-345cd7.netlify.app/util/util99.min.js" defer></script>
</head>
<body>
<header>
<h1>Acme Blogs</h1>
<form id="filterForm">
<select id="selectMenu">
<option selected>Employees</option>
</select>
</form>
</header>
<main>
<p class="default-text">Select an Employee to display their posts.</p>
</main>
<footer>
<p>Acme Company</p>
</footer>
<div id="mocha" class="testResults"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.1.3/mocha.min.js"
integrity="sha512-lvMvODyFG9d4cHdd60PNqWrHrXuuwI4NT4hZVZBVqF95tsNY36VJbXXG/s7Fv4DO4bk/g5pAvJkbKdKdieb1+g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js"
integrity="sha512-gkZWobgJrQevN2HMEeTnSlxWPJ3HS0JJ3nXcgI6XLK/NI0z59jbztRZqbTlIzfl21vIGahQaeW0knwH1az/tbg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
mocha.setup("bdd");
</script>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
