Related questions
Concept explainers
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 nowThis is a popular solution!
Step by stepSolved in 2 steps
- Please help with this question the instructions are on the imagearrow_forwarddo this in a visual studio code (php), correctly. Add below a list that displays the top ten dogs in the show. This is defined as the ten dogs who have the highest average scores, provided they have entered more than one event. Display just the dog’s name, breed, and average score. Next to each dog, add the name of the owner and the owner’s email address. The email address link should start up the default email application to send an email to the owner. The owner’s name should link to a second page containing the owner’s contact details.arrow_forwardstring.html Consider the following string examples: String x = "abc123xyz"; String x = "def456aaaaaaa"; String x = "zzz789bbbb"; Using a method from the String class, create a new string named result that contains the numeric characters for any possible string matching the above patterns using the x variable (and any necessary methods). Don't forget to end your response with a semi- colon.arrow_forward
- in javascript Create a function that will load a new image from the website https://cataas.com/cat every 10 seconds, and will stop this interval when the SPACEBAR is pressed.arrow_forwardJava Question - Create a GUI-based Java application that uses three JLabel, threeJTextFields, and one JButton control to build a GUI “form”, as shown in the attached picture. Set the background color of the form to “pink”. Makesure the output looks similar to the picture. [Note: Be sure to use input and output dialog boxes]. Thank you.arrow_forwardPlease help using java create instructions for a game I’m that I am creating on replit. But i don’t know how to. I would like for the instructions to be incorporated into java gui. If you can please make search bar. And if they type up a word how to win. It will show them a question that they may be asking. I would also like the program to sort between frequent asked questions. Just use tic tac toe as example of what the create the instructions on Thank youarrow_forward
- I'm working on an assignment and i'm trying to create a to-do list in AndroidStudio. I've created the listview, edit text, switch and button, but I've hit a snag with the following: Create a new Java object to hold each todo item, it should contain a string with the text of the todo, and a boolean for if it is urgent or not. Create a List to hold all your items, and for the adapter to use for displaying them. When you click “Add”, you should create a new todo item and add it to the list, clear out the text in the EditText, and call “notifyDatasetChanged()” on your adapter so it refreshes. Implement a BaseAdapter to power the ListView. In AndroidStudio, type ctrl + O (the letter ‘O’, not number zero). From the list of inherited functions, implement these ones: int getCount() - This returns the number of rows that will be in your listView. In your case, it should be the number of strings in the array list object ( return list.size() ). Object getItem(int position) – This…arrow_forwardHey im stuck on my assignment. It is supposed to be in javascript code and i forgot to specify that. Please Help!!! window.addEventListener("DOMContentLoaded", domLoaded); function domLoaded() { // TODO: Complete the function } function convertCtoF(degreesCelsius) { // TODO: Complete the function } function convertFtoC(degreesFahrenheit) { // TODO: Complete the function } HTML code <!DOCTYPE html> <html lang="en"> <title>Temperature Converter</title> <scriptsrc="convert.js"></script> <style> body { font-family:Arial, Helvetica, sans-serif; } label { display:block; } #errorMessage { color:red; } </style> <body> <h1>Temperature Converter</h1> <p> <labelfor="cInput">Celsius:</label> <inputid="cInput"type="text"> </p> <p> <labelfor="fInput">Fahrenheit:</label> <inputid="fInput"type="text"> </p>…arrow_forwardI am attempting to write a code that will allow me to loop through a series of FITS fies in a folder on my Desktop. This is what I have so far, but no plot as yet. I have included a picture of what the plot should look like after the looping process. import numpy as npimport matplotlib.pyplot as pltimport globfrom astropy.io import fitsfrom astropy.wcs import WCSfrom pathlib import Path%matplotlib inline%matplotlib widget plt.figure(figsize=(5,5))legends = [] def plot_fits_file(file_path): # used this data to test ---------- # lam = np.random.random(100) # flux = np.random.random(100) # -------------------- # below code will work when you have file # all the plot will be on single chart hdul = fits.open(file_path) data = hdul[1].data h1 = hdul[1].header flux = data[1] w = WCS(h1, naxis=1, relax=False, fix=False) lam = w.wcs_pix2world(np.arange(len(flux)), 0)[0] plt.plot(lam, flux) plt.ylim(0, ) plt.xlabel('RV[km/s]')…arrow_forward
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSON
Computer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier Science
Network+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning 
Concepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage Learning
Prelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson Education
Sc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY