problem in default argument in JavaScript's function

Question

I have created a JavaScript Function with a default argument remove = false but when No value is passed the remove parameter do not acquire the default "false" value instead of that it acquires a very large object, See my Function code:-

infoBtnCB.addEventListener("click", clickEventInfoBtn_CB);
function clickEventInfoBtn_CB(remove = false) {
  console.log(remove);
  if (remove) {
    infoBtnCB.classList.remove("active-info-btn-CB");
  } else {
    infoBtnCB.classList.toggle("active-info-btn-CB");
  }
  if (infoBtnCB.innerHTML == "Info" && !remove) {
    setTimeout(() => {
      infoBtnCB.innerHTML =
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
    }, 100);
  } else {
    infoBtnCB.innerHTML = "Info";
  }
}

OUTPUT WHEN FUNCTION IS CALLED AS : clickEventInfoBtn_CB(true)

we get remove = true;

and when,

IT IS CALLED BY EVENTLISTNER:-

we get remove = PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …};

Event listeners will always be executed with some parameters. Just because you've declared remove = false doesn't mean that the event handler will be called with a boolean - it's always passed an event. That's how all event handler callbacks are executed. — VLAZ
– VLAZ, Commented Sep 24, 2021 at 10:18
@VLAZ should I add a second argument with the name event so that eventListner will not add its event to my remove parameter?? — Zandium
– Zandium, Commented Sep 24, 2021 at 10:20
The event is always passed as the first argument. You're better off not using a direct function reference .addEventListener("click", () => clickEventInfoBtn_CB()) — VLAZ
– VLAZ, Commented Sep 24, 2021 at 10:22

Shonal · Accepted Answer · 2021-11-02 11:32:39Z

1

When passing parameter values, use an "anonymous function" that calls the specified function with the parameters:

document.getElementById("myBtn").addEventListener("click", function(p) {
  p = false;
  myFunction(p);
});

function myFunction(a) {
  document.getElementById("demo").innerHTML = a;
}

<button id="myBtn">Try it</button>

<p id="demo"></p>

edited Nov 2, 2021 at 11:32

answered Sep 24, 2021 at 11:15

Shonal

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charlie Over a year ago

This answer would be better if the anonymous function contained a default argument - but it is called without any argument. This would show the OP that default arguments still work when a function is called without arguments in an event. code.

Thallius · Accepted Answer · 2021-09-24 10:21:15Z

0

Eventhandler always give the event as an argument to the callback function. So this would not work. You can easily change your code to fulfill your requirements in this way

infoBtnCB.addEventListener("click", () => { clickEventInfoBtn_CB(); });
function clickEventInfoBtn_CB(remove = false) {
  console.log(remove);
  if (remove) {
    infoBtnCB.classList.remove("active-info-btn-CB");
  } else {
    infoBtnCB.classList.toggle("active-info-btn-CB");
  }
  if (infoBtnCB.innerHTML == "Info" && !remove) {
    setTimeout(() => {
      infoBtnCB.innerHTML =
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
    }, 100);
  } else {
    infoBtnCB.innerHTML = "Info";
  }
}

answered Sep 24, 2021 at 10:21

Thallius

2,6132 gold badges19 silver badges41 bronze badges

1 Comment

Zandium Over a year ago

Ah hah Nice and thanks, So we gonna put dirt in eventListner's eyes XD, Thanks again

Nitheesh · Accepted Answer · 2021-09-24 10:21:28Z

The first argument for an event listner function will be the event by which it was executed. So if you wnt to make the function call without the event object, you could make use of an arrow function, and the function call without the event.

const infoBtnCB = document.getElementById("infoBtnCB");
infoBtnCB.addEventListener("click",(e) => clickEventInfoBtn_CB());
function clickEventInfoBtn_CB(remove = false) {
  console.log(remove);
  if (remove) {
    infoBtnCB.classList.remove("active-info-btn-CB");
  } else {
    infoBtnCB.classList.toggle("active-info-btn-CB");
  }
  if (infoBtnCB.innerHTML == "Info" && !remove) {
    setTimeout(() => {
      infoBtnCB.innerHTML =
        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque accusamus ipsum, quidem harum similique blanditiis, veritatis nam sapiente tenetur rerum temporibus asperiores, commodi consequatur corporis quisquam aspernatur quas laudantium eaque.m";
    }, 100);
  } else {
    infoBtnCB.innerHTML = "Info";
  }
}

<button id="infoBtnCB">Click Me</button>

Collectives™ on Stack Overflow

problem in default argument in JavaScript's function

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related