The event listener is activated before the HTML element is selected for clicking

Question

The event listener is activated before the HTML element is selected for clicking

I've encountered a strange issue while using the addEventListener method on an HTMLElement within a function that is triggered onload. The problem is that the method seems to be getting executed before I even attempt to click on the element in the HTML page.

        function setConfigurationMenu(){

            var navConfigure = document.querySelector(".navConfigure");
            var navBody = navConfigure.querySelector(".body");
            var navTop = navConfigure.querySelector(".top");

            navTop.addEventListener("click", alert("jow"));

        }

This behavior is puzzling, does anyone have any insights into what might be happening here?

Thanks,

javascript addeventlistener

Answer 1

Answer №1

The reason for this issue is that you are using the alert function and passing its undefined return value as a parameter to the addEventListener method. You should actually pass a function instead.

navTop.addEventListener("click", functionToBeTriggered);

Since the alert function requires a parameter (which is your text), you can wrap it in an anonymous function that invokes it. Here's an example:

navTop.addEventListener("click", function() {
    alert("jow")
});

Answer 2

The reason for this issue is that you are using the alert function and passing its undefined return value as a parameter to the addEventListener method. You should actually pass a function instead.

navTop.addEventListener("click", functionToBeTriggered);

Since the alert function requires a parameter (which is your text), you can wrap it in an anonymous function that invokes it. Here's an example:

navTop.addEventListener("click", function() {
    alert("jow")
});

Answer 3

Answer №2

The reason for this occurrence is due to using the function result instead of the function handler. Consider using an anonymous function like so:

navTop.addEventListener("click", function() {
    alert("hello");
});

To clarify, you are currently executing a function when what you actually require is to provide a handler for it.

Answer 4

The reason for this occurrence is due to using the function result instead of the function handler. Consider using an anonymous function like so:

navTop.addEventListener("click", function() {
    alert("hello");
});

To clarify, you are currently executing a function when what you actually require is to provide a handler for it.

The event listener is activated before the HTML element is selected for clicking

Answer №1

Answer №2

Similar questions

Transferring data from ng-init to <script> in AngularJS

What is the best way to choose a random number using jQuery?

Using gulp to duplicate files from a specific directory nestled within a larger folder structure

Using jQuery to enable scrolling and dynamically changing classes

Changing the color of a div through animation

The context provider in Next.js wraps the App component with a layout component specific to each page, resulting in data

What causes the child component to re-render when only the prop is changed and useCallback is used?

Combining Jquery scripts for seamless integration

Tips for transferring parameters between functions in AngularJS

Switch out a new js file every time the page is reloaded

Focus on all of the individual items except for the one that was just selected

Error: The `onClick` listener was anticipated to be a function, but was actually found to be an object type value

Passing a variable via routes using Express

Error: the function t.rgb is not defined

Discover how to transform a collection of numbers into a more expansive set that accurately reflects the original set

What is the method for changing the Uint8Array object into a string?

Encountering a "Duplicate identifier error" when transitioning TypeScript code to JavaScript

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

Searching for an element with a changing name using jQuery - Struggling with quotes

Learn the steps to dynamically adjust the size of a pop-up window in Sencha based on the content that is