Two .onclick with different functions

Question

I'm trying to familiarize myself with Javascript, and this is a behavior I've seen trying to work on my calculator.

   setup();    
    function setup(){
      element = document.getElementById("1");
      console.log(element);
      
      if(element.innerHTML === "1"){
        var test = element;
        element.onclick = test1;
        element.onclick = test2;
      }
    
    }
    
    function test2(){
      console.log("Test2 function");
    }
    
    function test1(){
      console.log("Test1 Function");
    }

How come if I run this, only the test2 function returns a log, does it only return the last function called, or is it a behavior of the .onclick function?

Now if I try calling the test1 function from inside test2 like this, it still doesn't work.

function test2(){
  console.log("Test2 function");
  test1;
}

But if I instead do this:

function test2(){
  console.log("Test2 function");
  test1();
}

It logs both of them. How come? I'm used to Ruby if that is relevant.

==================================

Also another question, what is the difference between

function test(){
  return function(){
   console.log("test!");
  }
}

to

function test(){
  console.log("test");
}

Also worth noting that innerHTML always returns a string, so there's no need to do a strict assessment on its value. — BenM
– BenM, Commented Jul 25, 2017 at 11:33

BenM · Accepted Answer · 2017-07-25 11:40:04Z

2

Because you're overriding the onclick function when you bind test2. If you need to run both when clicking, wrap the binding inside an anonymous function and call both:

if(element.innerHTML === "1")
{
    element.onclick = function() {  
        test1();
        test2();
    }; 
}

Alternatively, you can use event bindings instead of assigning an anonymous function to the element's onclick property using addEventListener. This has the added advantage that you can remove either or both of the functions independently:

if(element.innerHTML === "1")
{
    element.addEventListener('click', test1);
    element.addEventListener('click', test2);
}

edited Jul 25, 2017 at 11:40

answered Jul 25, 2017 at 11:27

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Parkinson Over a year ago

Beat me to it - but yeah, OP was on the right track by saying "does it only return the last function called" but wasn't quite there.

Josef Tinagan Over a year ago

I kind of forgot the binding it inside an anonymous function is a thing. I think this one's the best solution.

Anatoly Strashkevich · Accepted Answer · 2017-07-25 11:29:17Z

0

You probably want this:

element.addEventListener(
  "click",
   () => console.log('log1')
)

element.addEventListener(
  "click",
   () => console.log('log2')
)

You can add as many listeners as you want!

answered Jul 25, 2017 at 11:29

Anatoly Strashkevich

1,9144 gold badges18 silver badges35 bronze badges

Comments

Tommy Brunn · Accepted Answer · 2017-07-25 11:29:28Z

0

.onclick is not a function but a property, so when you are setting it twice, you are overwriting it the second time. Consider this:

let a = 'foo'
a = 'bar'
// a is going to have the value 'bar'

As for when you are trying to call test1 from inside test2, you are not calling the function. Functions are called with parens in Javascript. For example:

function test2(){
  console.log("Test2 function");
  test1();
}

For your third question, the difference is that in the second function you are returning a new function, whereas in the first you are not returning anything.

answered Jul 25, 2017 at 11:29

Tommy Brunn

2,5623 gold badges29 silver badges42 bronze badges

3 Comments

Jack Parkinson Over a year ago

Addition to point 3: while you are not returning anything, the console.log() will still execute -there just won't be any returned value

BenM Over a year ago

Actually, by using parentheses when assigning to onclick, would actually assign the return value. It should be bound without them.

Josef Tinagan Over a year ago

I see I was under the impression that .onclick behaves like a function, no wonder I got confused on the behavior.

Khauri · Accepted Answer · 2017-07-25 11:30:36Z

0

While you could just wrap both functions in another function, you lose the ability to disable only one event handler but not the other. Instead you could use addEventListener

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

element.addEventListener('click', test1);
element.addEventListener('click', test2);

answered Jul 25, 2017 at 11:30

Khauri

3,8731 gold badge13 silver badges19 bronze badges

Comments

Joe Bernstein · Accepted Answer · 2017-07-25 11:33:08Z

In addition to what Ben Msaid, the reason that your third block of code works but the second block of code does not is because in the second block, you simply call the functions name whereas in the third, you are actually calling the function (with the parenthesis). I'm not sure of the exact technical reason, but I believe that

test;

will simply get the address location/its signature, whereas

test();

is telling the computer to run the function.

For your last question, the first one returns a function that logs, whereas the second one simply is a function that logs.

So, to call the one that returns the function, you would do:

test()(); //calling the function that is returned from the test call

compared to

test();

Collectives™ on Stack Overflow

Two .onclick with different functions

5 Answers 5

2 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related