I'm currently in the process of learning Javascript and trying to grasp the concept of events and selectors.
My aim is to have a close button that, when clicked, triggers a specific dropdown related to the card it's attached to.
I plan to achieve this by toggling a class where the necessary styles have already been defined.
The issue I'm encountering is as follows: Uncaught TypeError: Cannot read property 'classList' of undefined;
If I use a standard event handler, all dropdown menus are affected, which is not the desired outcome.
Below is my code:
HTML
<section id="wrapper">
// HTML content here
</section>
CSS
<pre>
/* CSS styling here */
</pre>
Javascript
(function() {
let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".close"));
closeButtons.forEach(function(button) {
button.addEventListener("click", function(e) {
let elements = Array.prototype.slice.call(document.querySelectorAll('ul'));
elements.forEach(function(e) {
e.target.classList.toggle('show');
});
});
});
})();
Could someone provide insight on what might be going wrong, and offer suggestions for fixing the script to reach the intended result?
Note: Using jQuery is not an option.