Assigning multiple functions to onclick only triggers the last one

Question

Using this JavaScript:

function test1() { console.log('Test 1'); }
function test2() { console.log('Test 2'); }

const button = document.getElementById('button');  

button.onclick = function() { test1(); }
button.onclick = function() { test2(); }

and this HTML

<button id="button">RGB</button>

When I click on the button, only "Test 2" is displayed in the console.

Why is this the case? Why aren't both functions executed?

Closely related (if not duplicate): [How to call multiple JavaScript functions in onclick event?](https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event) — Ivar, Jun 08 '19 at 09:36

score 0 · Accepted Answer · answered Jun 08 '19 at 09:31

Look how similar those both lines look

button.onclick = function() { test1(); }
button.onclick = function() { test2(); }

To make it more clear

let a = "foo";
a = "bar";
console.log(a);

Just as we've overridden a, you're overriding button.onclick by assigning multiple times to it.

You'd usually addEventListeners nowadays instead of using onclick.

button.addEventListener('click', function() { test1(); })
button.addEventListener('click', function() { test2(); })

button.addEventListener('click', test1 }) is enough – Sebastian Speitel Jun 08 '19 at 09:33 — Sebastian Speitel, Jun 08 '19 at 09:33

score 0 · Answer 2 · answered Jun 08 '19 at 09:44

When I click on the button, only "Test 2" is displayed in the console.

This is because second function is replacing the previous function which was assigned to onclick. You can avoid two onclick and call test2 from test1

function test1() {
  console.log('Test 1');
  test2();
}

function test2() {
  console.log('Test 2');
}

const button = document.getElementById('button');

button.onclick = function() {
  test1();
}

<button id="button">RGB</button>

score -1 · Answer 3 · answered Jun 08 '19 at 09:32

When you change button.onclick it doesnot combine the previous values and the new value. Instead the previous one is replaced by new one. n

When you assign a variable to a value. The previous value is overwritten by the new one.

If you want to attach multiple functions for single event use addEventListener

function test1() { console.log('Test 1'); }
function test2() { console.log('Test 2'); }
const button = document.getElementById('button');  
button.addEventListener('click',test1) ;
button.addEventListener('click',test2)

<button id="button">Click me</button>

Assigning multiple functions to onclick only triggers the last one

3 Answers3