how to add multiple event handlers to the same event?

Question

I'm new to JavaScript and I'm trying to register 2 event handlers to the same event from two different functions, but no matter what I try one event handler overrides the other. Is there any way that I can register multiple event handlers from different functions?

In the code bellow I try to register two event handlers by pressing two buttons, but the handlers override each other.

<p id="text">text</p>

<p id="text1">text1</p>

<button id="myBtn">text</button>

<button id="myBtn1">text1</button>

<script>
document.getElementById("myBtn").addEventListener("click", foo);

document.getElementById("myBtn1").addEventListener("click", bar);

function foo() {
  var target = document.getElementById("text");

  document.body.onkeypress = function(e){
    animateElem(target);
  }
}

function bar() {
  var target = document.getElementById("text1");

  document.body.onkeypress = function(e){
    animateElem(target);
  }
}

function animateElem(elemFound){
    var start = 0.3;
    var increment = 0.3;

    var id = setInterval(allOpacity, 100);

    function allOpacity() {
        if (start > 3) {
          clearInterval(id);
          elemFound.style.opacity = 0.5;
        } 
        else {
          start = start + increment;
          elemFound.style.opacity = start % 1;
        }
    }
}

</script>

Possible duplicate of [addEventListener Two Functions](https://stackoverflow.com/questions/25028853/addeventlistener-two-functions) — vahdet, Mar 11 '19 at 19:51
Just like a variable can only hold a single value (`var foo = 42;`) a property can also only hold a single value (`document.body.onkeypress = ...`). Use `addEventListener` to bind the handler, just like you do for the other events. — Felix Kling, Mar 11 '19 at 19:53
Check out this post about difference of addEventListener and onclick approaches https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — lankovova, Mar 11 '19 at 19:59
I have tested your code in Codepen.io and it actually worked. Both function foo() and bar() were successfully executed. Please explain what your code suppose to do. — Konrad Szałwiński, Mar 11 '19 at 20:01
thank you for the responses, not sure if the other thread makes this one a duplicate, but @Maheer Ali 's approach worked for me — MacAndCheeseTosh, Mar 11 '19 at 20:25

Maheer Ali · Accepted Answer · 2019-03-11T20:12:35.803

You should use addEventListener() instead of onkeypress

addEventListener allows adding more than a single handler for an event.

document.body.onkeypress = function(e){...} will override the other function.

<p id="text">text</p>

<p id="text1">text1</p>

<button id="myBtn">text</button>

<button id="myBtn1">text1</button>

<script>
document.getElementById("myBtn").addEventListener("click", foo);

document.getElementById("myBtn1").addEventListener("click", bar);

function foo() {
  var target = document.getElementById("text");
  document.body.addEventListener('keypress',(e)=>{
    animateElem(target);
  })   
}

function bar() {
  var target = document.getElementById("text1");
  document.body.addEventListener('keypress',(e)=>{
    animateElem(target);
  }) 
}

function animateElem(elemFound){
    var start = 0.3;
    var increment = 0.3;

    var id = setInterval(allOpacity, 100);

    function allOpacity() {
        if (start > 3) {
          clearInterval(id);
          elemFound.style.opacity = 0.5;
        } 
        else {
          start = start + increment;
          elemFound.style.opacity = start % 1;
        }
    }
}

</script>

how to add multiple event handlers to the same event?

1 Answers1