how to disable a function

Question

function function1 () {
  document.addEventListener('keyup', event => {
  if (event.code === 'Space') {
    console.log("hello world");
})
}

function onload() {
function1();
}

function function2(){
 document.addEventListener('keyup', event => {
  if (event.code === 'Space') {
    console.log("hello");
})
}

<body onload="onload()">
<button onclick="function2()">click</button>
</body>

This code will alert hello world when i press space key.

And when i execute the second function, i expect it to alert "hello" when i press space key

but it executes both function and alerts "hello world" and "hello" instead, so i was wondering how can i disable the function1() and only alert "hello" instead of executing the 2 functions when i execute the second function and press space key

If you use event listeners then you can add and remove them when you like. — evolutionxbox, Apr 09 '21 at 09:21
https://stackoverflow.com/questions/4402287/javascript-remove-event-listener — Amir Saleem, Apr 09 '21 at 09:23
you have to add the 2nd keyup event targeting to the button instead. — Miheo, Apr 09 '21 at 09:26
`"message": "SyntaxError: expected expression, got ')'",` **Please fix your snippet.** We cannot help you with code that isn't even remotely syntactically correct. — connexo, Apr 09 '21 at 10:57
Why are you adding event listeners when the button is clicked? Why are you uselessly wrapping `function1` in `onload`? — connexo, Apr 09 '21 at 11:02

connexo · Accepted Answer · 2021-04-09T11:25:59.243

Many issues with your code. Here we go:

Do not ever use inline event listeners in your HTML like <button onclick="function2()">. It is widely considered really bad practice and has security issues. Instead, work with the DOM API and use addEventListener.
Why would your button add an event listener when clicked, repeatedly if clicked multiple times?
Most events are propagated throughout the DOM (that is called event bubbling), and means that when an event occurs on an element, the event is next propagated to that elements' parent element, and so on, until the event finally reaches html (which is document). You can suppress that calling event.stopPropagation() on the event in the handler where you want to prevent bubbling.
Do not use event.code since it ignores the keyboard layout of the user. Instead, work with event.key. A good site for quick keyboard event information testing is https://keycode.info/.

Please educate yourself about DOM events. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

function f1(event) {
  if (event.key === ' ') {
    console.log("hello world");
  }
}

function f2(event) {
  if (event.key === ' ') {
    event.stopPropagation();
    console.log("hello");
  }
}

document.addEventListener('keyup', f1);

document.querySelector('button').addEventListener('keyup', f2);

<button>click</button>

how to disable a function

1 Answers1