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

Ajax refreshes page to default state post search

Changing the way in which text is selected and copied from a webpage with visible white space modifications

Guide to adding the initial element in an array using Immutability Helpers

Background Services in the Moment

When it comes to React, an unspoken truth is that undefined could potentially cause issues

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Exploring logfile usage in JavaScript. What is the best way to structure the log?

Exploring the effectiveness of React Hook Form using React Testing Library

Looking to add some color to the tags within an XML document that is being shown in a textarea?

Using JavaScript in Django templates: Displaying errors with a JavaScript function

What strategies can be utilized to raise the max-height from the bottom to the top?

Steps for incorporating code to calculate the total price and append it to the orderMessage

The concept of CSS sprites and managing background positions

Leveraging pre-rendered HTML in Vue.js components for both parent and child elements

Refresh the information stored in the spliced array of objects

code, scripting - modal pop-up

What could be causing the issue with "class not being recognized as a constructor" error that I am encountering?

Capture a screenshot of an element in either jpg or png format and proceed to save it to your device using Javascript

Numerous buttons activating a single modal component

Using Local Storage to store arrays in JavaScript/jQuery