I am relatively new to javascript, and I am having problems grasping event listener functions for a series of button inputs and text inputs linked to arrays. All the functions focus on a single task and are relatively simple-- at least in conception, if not my execution.
Please follow the codepen.io link for the html, css, and js code. The first two are mostly functional, the latter is a hot mess. I appreciate any help or tips you can provide.
Sincerely,
Fibulo
Why do you use forEach at the end of line 1 and 2?
What’s your purpose?
AFAIK it’s not the right way to use forEach.
May be you should re-research about what’s the output of querySelectorAll and getElementById, also how to utilize forEach method.
Just in case you didn’t know, Codepen gives hint on errors by clicking the red circle that popped up at the bottom right. Pair it with the message in the codepen console, they usually quite useful.
First, can you provide some background info on what the web app is about, what those listeners and buttons are supposed to do?
It seems you are stepping ahead of yourself, trying to create something, while not familiar with how to cache the DOM or attach event listeners.
There are simple guides out there, which can show you simple projects, covering those same techniques.
Here is a good bunch of them, start with the first ones and do as much as your ability allows(until you advance enough in your skill to be able to work on the rest).
To comment on your actual project, there are many errors and ill point a few ones.
First the line(and other similar):
let bttns = document.querySelectorAll(".button").forEach()
What is it supposed to do. I suppose, you were intending to cache the DOM(reference elements on the document). For this you just do the respective selector- querySelector, querySelectorAll, getElementById etc. Attaching forEach(), method, not only produces the array of the elements(technically its not exactly considered an array but a more particular list of elements), but you also iterate throught it and apply some actions on the elements, determined by the callback you provide to forEach as parameter, but you didnt include that. In the end, even if you provided a parameter, you wouldnt really make the desired reference to the nodes, but just bunch them up, execture some actions, and not return any value, to be assigned to the bttns variable. Its also recommended to use const, not let for caching the DOM, because you are not expecting to change the value, when targeting DOM elements.
Another syntax error i was pointed by the console, was, you created a buttonsToggle function, but then tried to reference to it with bttnsToggle as name(at least i assume whats what you intended`.
Another mistake you did is trying to attack event listener to all buttons at once, as an array, instead to each one of them individually.
bttns.addEventListener("click", buttonToggle);
You basically say- “attach this event listener to that array of buttons”, but you dont attach listeners to arrays, but to DOM nodes/elements. You want to go throught every element(button) in the array and attach the supposed event listener.
bttns.forEach(bttn=>bttn.addEventListener('click', buttonToggle /* not bttnToggle */))
Ill stop here. From here on you have some work on putting your project in shape and once those errors are fixed, we can see to further improve your code if needed.
PS: to be clear, remove forEach on the lines where you declare the DOM elements variables, and use it when you add the event listeners, or do other manipulations with the respective elements.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.