How come my JavaScript function is triggering without me clicking anything?

Question

How come my JavaScript function is triggering without me clicking anything?

I want to create a toggle effect on the 'active' class using JavaScript, with all JS code residing in my main.js file. I prefer not to include an onClick=toggle() attribute in my #readmore button. The onClick method functions correctly and toggles the 'active' class as desired. However, there is an issue when I use the code below – it automatically adds the 'active' class to .container and does not remove it when I click on #readmore. Additionally, I am looking for a solution that does not involve jQuery.

Here is the CODE:

var myBtn = document.querySelector("#readmore");

myBtn.addEventListener("click", toggle());

function toggle() {
   document.querySelector(".container").classList.toggle('active');
};

<div class="container">
<div class="content">
   <h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, modi! Ipsum ab non voluptas facilis maxime architecto nulla consectetur recusandae.
   </h2>
   <img src="img/img4.jpg" alt="" width="600px">
   <a href="#" id="readmore">Read More</a>
</div>

javascript html css web

Answer 1

Answer №1

toggle gets called when the event listener is added:

myButton.addEventListener("click", toggle());
//                                    ^^

The correct way is to pass the function as a reference:

myButton.addEventListener("click", toggle);

Answer 2

toggle gets called when the event listener is added:

myButton.addEventListener("click", toggle());
//                                    ^^

The correct way is to pass the function as a reference:

myButton.addEventListener("click", toggle);

Answer 3

Answer №2

When you write the code snippet

myBtn.addEventListener("click",toggle());

, you are actually invoking the function immediately instead of attaching it to the event listener. To correct this, you need to pass a reference to the function in the addEventListener method like so:

Update your code to look something similar to this -

myBtn.addEventListener("click", toggle);

Answer 4

When you write the code snippet

myBtn.addEventListener("click",toggle());

, you are actually invoking the function immediately instead of attaching it to the event listener. To correct this, you need to pass a reference to the function in the addEventListener method like so:

Update your code to look something similar to this -

myBtn.addEventListener("click", toggle);

Answer 5

Answer №3

To properly use the second parameter which expects a function reference, you must provide one instead of immediately calling the function and passing its result in your code.

The correct way to do this is as follows:

myBtn.addEventListener("click", toggle);

For more information, please refer to the documentation: MDN addEventListener. Now, the listener will be able to detect the click event and execute the function accordingly.

Answer 6

To properly use the second parameter which expects a function reference, you must provide one instead of immediately calling the function and passing its result in your code.

The correct way to do this is as follows:

myBtn.addEventListener("click", toggle);

For more information, please refer to the documentation: MDN addEventListener. Now, the listener will be able to detect the click event and execute the function accordingly.

How come my JavaScript function is triggering without me clicking anything?

Answer №1

Answer №2

Answer №3

Similar questions

Reducing the size of JavaScript code using C# in ASP.NET

Tips for visually comparing two large JavaScript objects using two separate console.log statements

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

What is the most effective way to retrieve all child Elements within a parent container?

Exploring plyr and vue.js: utilizing a computed property to fetch video duration

Accessing a JavaScript object outside of its containing JavaScript file within a Dojo

Error: Unable to use 'UserContext' until it has been initialized - React

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

Troubleshooting: Issue encountered while declaring a GraphQLList containing a user-defined type within a GraphQLObjectType

`Why am I having difficulty transmitting HTML content with Node.js through Mailgun?`

Creating PHP functions that return a JSON string when invoked - a simple guide

Locate a DOM element by its attribute identifier

Having trouble with the installation of nodemon globally on macOS Mojave?

Utilize the sortable script for dynamically loaded items via AJAX

Struggling with this <form> and need help adding space or a line break after form entry

Tips for reducing the size of your JavaScript buffer

What is the best way to structure an XML document?

The text inside the text box remains visible even after the Ajax call

Having issues with angular-file-upload failing to include the file in the request

Tips for implementing multiple associations, conditions, and includes in node.js sequelize when using findAll