OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why are my simple addEventListener functions not working, except one works backwards? [duplicate]

  • Thread starter Thread starter miguel
  • Start date Start date
M

miguel

Guest
So I'm new to javascript and new to coding. I am building a website or two just to learn while I'm building. I'm doing this locally on my laptop. I'm trying to make a button on my website, that when clicked toggles a class name on an element. I did this once already but I'm trying again now, and it just wont work. I've tried a function declaration and an arrow function too. Here are my functions.


Code:
const mainMenu = document.querySelector('.button'); 
mainMenu.addEventListener('click', () => { 
  mainMenu.classList.toggle('active'); 
});


Code:
const mainMenu = document.querySelector('.button'); 
mainMenu.addEventListener('click',  myFunc ()); 
  mainMenu.classList.toggle('active');
}

If in the declaration function on the addEventListener line I put myFunc() instead of myFunc and then refresh the page, the page loads as if I had already clicked the button which is backward for what I want. If I put myFunc nothing happens at all. What am I doing wrong?

Nothing happens at all. The button doesn't make the menu pop out like I expected. The button should toggle a class on one of my elements, and that class in my CSS is styled to appear once it is toggled on and disappears when it is off. The only time anything happens is if in my function declaration in the addEventListener line, I put myFunc() instead of myFunc. That makes the toggle load already on which is not what I want.
<p>So I'm new to javascript and new to coding. I am building a website or two just to learn while I'm building. I'm doing this locally on my laptop. I'm trying to make a button on my website, that when clicked toggles a class name on an element. I did this once already but I'm trying again now, and it just wont work. I've tried a function declaration and an arrow function too. Here are my functions.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const mainMenu = document.querySelector('.button');
mainMenu.addEventListener('click', () => {
mainMenu.classList.toggle('active');
}); </code></pre>
</div>
</div>
</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const mainMenu = document.querySelector('.button');
mainMenu.addEventListener('click', myFunc ());
mainMenu.classList.toggle('active');
} </code></pre>
</div>
</div>
</p>
<p>If in the declaration function on the <code>addEventListener</code> line I put <code>myFunc()</code> instead of myFunc and then refresh the page, the page loads as if I had already clicked the button which is backward for what I want. If I put myFunc nothing happens at all. What am I doing wrong?</p>
<p>Nothing happens at all. The button doesn't make the menu pop out like I expected. The button should toggle a class on one of my elements, and that class in my CSS is styled to appear once it is toggled on and disappears when it is off. The only time anything happens is if in my function declaration in the addEventListener line, I put <code>myFunc()</code> instead of <code>myFunc</code>. That makes the toggle load already on which is not what I want.</p>
Continue reading...
 

Latest posts

Top