Using removeEventListener on function with parameter

Question

Below is a module of my programme to toggle page numbers

How can we use `removeEventListener' to remove functions with paramter.JSFiddle

My JS part is

document.querySelectorAll('button').forEach
(  btn =>
  {
    btn.addEventListener("click" , function(){grab(btn.innerText)});
  }
);
function grab(val)
{  document.getElementById("test1").innerText = Number(val);
   document.getElementById("test2").innerText =  Number(val)+1;
   document.getElementById("test3").innerText = Number(val)+2;    
}
//document.getElementById("testd").removeEventListener("click" , grab);
document.getElementById("testd").removeEventListener('click' ,function(){grab(btn.innerText)});  //trying to remove event on annonynous function


document.getElementById("testd").addEventListener("click", function(){Track()});


function Track()
{
    console.log("Hello");
}

I have to provide paramter so that upon clicking the button values can be increased , but however I don't want this functionality on '<' & '>' buttons.I tried to use removeEventListener but it is not working. I know that I used anonymous function to increment value that is why I am using removeEventListener on same annonymous function to remove it. Can anyone please tell me why it is not working & any proper method to do so.

Thank You

maybe instead of `querySelectorAll('button')` you can add a class to your number buttons and use `getElementsByClassName` access buttons by their index and give that functionality only to those buttons — Chris G, Jan 11 '23 at 13:15
"*using `removeEventListener` on same annonymous function*" - no, it's a different function — Bergi, Jan 11 '23 at 13:20
The dupe was not ok. OP does not need to removeEventListener just because the buttons have slightly different function — mplungjan, Jan 11 '23 at 13:21

mplungjan · Answer 1 · 2023-01-11T13:49:48.810

No need to remove the event listener

I suggest you delegate instead

I added the complet logic and gave the numbers a class

window.addEventListener('DOMContentLoaded', () => { // when page loads
  const maxPages = 10;
  const visibleButtons = 3;
  const back = document.getElementById('back');
  const forward = document.getElementById('forward');
  const nums = document.querySelectorAll('.num'); // all nums
  const track = btn => {
    const direction = btn.id === "forward" ? 1 : -1;
    let val = +document.getElementById("test1").textContent;
   
    for (let i = 1; i <= visibleButtons; i++) {
      const btn = document.getElementById(`test${i}`)
      btn.innerText = val + direction + (i - 1);
      btn.disabled = +btn.innerText > maxPages;
    }
    val = +document.getElementById("test1").textContent;
    back.disabled = val === 1;
    forward.disabled = nums[visibleButtons-1].textContent >= maxPages;
    // here you may want to navigate to some page based on value of first or last button

  }
  back.disabled = +document.getElementById('test1').textContent === 1;

  document.getElementById('buttons').addEventListener('click', (e) => {
    const tgt = e.target;
    if (!tgt.matches('button')) return; // not a button
    if (["back", "forward"].includes(tgt.id)) { // not the numbers
      track(tgt);
      return;
    }
    const val = tgt.textContent; // here we have the page the user clicked
    // go to page val here
  })
})

<!DOCTYPE html>
<html>

<head>
  <title>
    API Fetching &amp; displaying
  </title>
  <link rel="stylesheet" href="des.css">
</head>

<body id="main">


  <div id="buttons">
    <button id="back">&lt;</button>
    <button id="test1" class="num">1</button>
    <button id="test2" class="num">2</button>
    <button id="test3" class="num">3</button>
    <button id="forward">&gt;</button>
  </div>


</body>

</html>

buttons become NaN NaN NaN when i press forward arrow – Chris G Jan 11 '23 at 13:22 — Chris G, Jan 11 '23 at 13:22
@ChrisG Spelling mistake in the array – mplungjan Jan 11 '23 at 13:23 — mplungjan, Jan 11 '23 at 13:23

Using removeEventListener on function with parameter

1 Answers1