Using a self-invoking function in JavaScript with addEventListener

Question

Using a self-invoking function in JavaScript with addEventListener

I'm struggling to get an Event Listener to self invoke a function and work correctly.

Although the following code runs the function, the Event Listener is not functioning as expected:

window.addEventListener("resize", (function () {
document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
})())

This function is crucial for setting a dynamic CSS style necessary for website formatting. The "resize" function must be executed upon loading. Should I combine this into one self-invoking function, or create a separate Self-Invoking Function to call on the Event Listener?

javascript addeventlistener self-invoking-function

Answer 1

Answer №1

By invoking the function immediately, its return value is placed in its spot (

window.addEventListener('resize', undefined)

). It's better to define your function outside of the event listener and then add it before calling it.

function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
}
window.addEventListener('resize', onResize);
onResize();

It is technically possible to make this work using a self-invoking function, but it can be confusing and I would not recommend it.

window.addEventListener('resize', (function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
  // This works because it returns a function
  return onResize;
})());

Answer 2

By invoking the function immediately, its return value is placed in its spot (

window.addEventListener('resize', undefined)

). It's better to define your function outside of the event listener and then add it before calling it.

function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
}
window.addEventListener('resize', onResize);
onResize();

It is technically possible to make this work using a self-invoking function, but it can be confusing and I would not recommend it.

window.addEventListener('resize', (function onResize() {
  document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth;
  // This works because it returns a function
  return onResize;
})());

Answer 3

Answer №2

Your immediately invoked function expression (IIF) is returning undefined, but the event listener requires a function or a reference to a function. Make sure to add a return statement to your IIF or pass a function:

Example with an anonymous function:

 window.addEventListener("resize", function () {
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }))

IIF that returns a function:

 window.addEventListener("resize", (function () {
 return function(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }
 })())

Improved version with immediate invocation on startup:

window.addEventListener("resize", (function () {
  function set_innerHtml(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
  }
  set_innerHtml();
  return set_innerHtml;
})())

Answer 4

Your immediately invoked function expression (IIF) is returning undefined, but the event listener requires a function or a reference to a function. Make sure to add a return statement to your IIF or pass a function:

Example with an anonymous function:

 window.addEventListener("resize", function () {
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }))

IIF that returns a function:

 window.addEventListener("resize", (function () {
 return function(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
 }
 })())

Improved version with immediate invocation on startup:

window.addEventListener("resize", (function () {
  function set_innerHtml(){
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth
  }
  set_innerHtml();
  return set_innerHtml;
})())

Using a self-invoking function in JavaScript with addEventListener

Answer №1

Answer №2

Similar questions

Manage numerous canvas animations

Safari IOS experiencing issue with element disappearing unexpectedly when input is focused

What is the best way to transfer an integer from my main application to a separate JavaScript file?

I find the SetInterval loop to be quite perplexing

Interpolating backticks in Javascript allows for constructing a URL containing empty spaces

Stop the click event from firing on child elements of a parent element that is currently being dragged

Switch the selected option in JQuery UI dropdown using a clickable button

Ways to insert text at the start and end of JSON data in order to convert it into JSONP format

Dynamic and static slugs in Next.js routing: how to navigate efficiently

Vue.JS - Dynamically Displaying Property Values Based on Other Property and Concatenating with

Limit users to entering either numbers or letters in the input field

Utilizing Boolean Operators in JavaScript with Thymeleaf: A Guide

What is the best way to implement a switch that can simultaneously display both the on and off positions?

Save this page for later by using JavaScript to create a

Error handling middleware delivering a response promptly

One creative method for iterating through an array of objects and making modifications

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

Exclude React Native module and import web module in Webpack

Navigating race conditions within Node.js++]= can be challenging, but there are strategies

Calculating variables in JavaScript