0
  function roleDescription() {
    // вторая ступень = описание роли при наведении, выбор роли при клике
    for (let i = 0; i < originDescription.length; i++) {
      buttons[i].addEventListener('mouseover', asignDesc.bind(buttons[i], i));
      buttons[i].addEventListener('click', asignRole.bind(buttons[i], i), {
        once: true
      });
    }
  }

  function asignRole(i) {
    playerrole = role[i];
    alert(playerrole);
    makeSpecial();
  }

  function asignDesc(i) {
    maintext.textContent = originDescription[i];
    maintext.style.fontSize = '15px';
  }

  function makeSpecial() {
    // третья ступень - подтирание следов от выбора роли, смена кнопок на другие
    for (let i = 0; i < originDescription.length; i++) {
      buttons[i].removeEventListener('mouseover', asignDesc.bind(buttons[i], i));
      buttons[i].removeEventListener('click', asignRole.bind(buttons[i], i), {
        once: true
      });
    }
  }

i have four buttons for player to choose from and i want to player when he clicks one buttons function to assign role will be removed and he could proceed to the next step. i've declared buttons from the cycle and tried to remove buttons from the cycle, but no luck. how can i remove buttons without making very long code? or where am i mistaken with that one?

Prains
  • 17
  • 5
  • 1
    Does this answer your question? [Javascript removeEventListener not working](https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working) – Reyno Jun 15 '22 at 09:37
  • @Reyno it does not. i have functions attached to my eventlistener – Prains Jun 15 '22 at 09:41
  • 2
    Yes and they don't reference the same function hence it's not working. Just like the dupe. -> *You might wanna check the top comment on the accepted answer* – Reyno Jun 15 '22 at 09:44
  • `.bind()` returns a new function, so the `asignDesc.bind(buttons[i], i)` you use in the `.addEventListener` will return a different instance than the `asignDesc.bind(buttons[i], i)` in the `.removeEventListener` (despite that they do the same thing). If you want to remove the event listener, you will need to keep a reference to the function returned by the `.bind()` function, and use that same reference for both the `.addEventListener()` and the `.removeEventListener()`. – Ivar Jun 15 '22 at 09:46
  • ... which makes the code overly complicated. It looks like you could take the advantage of [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), and [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) the data you're handling with the events instead of trying to pass parameters to event handlers (and binding the event to an object it already is bound automatically). – Teemu Jun 15 '22 at 10:03

0 Answers0