CODEWITHSUNDEEP
javascriptdom-events
Josef Tinagan
Josef Tinagan

Reputation: 19

Two .onclick with different functions

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");
}

Upvotes: 0

Views: 58

Answers (5)

BenM
BenM

Reputation: 53198

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);
}

Upvotes: 2

Joe Bernstein
Joe Bernstein

Reputation: 163

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();

Upvotes: -1

Khauri
Khauri

Reputation: 3863

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);

Upvotes: 0

Tommy Brunn
Tommy Brunn

Reputation: 2562

.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.

Upvotes: 0

Anatoly Strashkevich
Anatoly Strashkevich

Reputation: 1914

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!

Upvotes: 0

Related Questions