How to handle events simpler in javascript?

Question

As a beginner with javascript, I am following this tutorial . At the top of that page simple forms and the use of an event handler is explained, while at the bottom of the page an exercise to create a simple calculator is given calculator.html .

I have come up with a very cumbersome solution to handle events when a number or operation is pressed. Here is what I have implemented:

function pressingNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}

function press1() {pressingNumber(1);}
function press2() {pressingNumber(2);}
function press3() {pressingNumber(3);}
var button1 = document.getElementById("button-1");
var button2 = document.getElementById("button-2");
var button3 = document.getElementById("button-3");
button1.onclick = press1;    
button2.onclick = press2;
button3.onclick = press3;

Is this the way to go? Is there a simpler way? I tried the following syntax which does not seem to work:

function pressingNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}

var button1 = document.getElementById("button-1");
var button2 = document.getElementById("button-2");
var button3 = document.getElementById("button-3");
button1.onclick = pressingNumber(1);    
button2.onclick = pressingNumber(2);
button3.onclick = pressingNumber(3);

Answer 1

Look at this line of code:

button1 = document.getElementById("button-1");

What does it do? It calls the function document.getElementById and assigns its return value to button1 .

Now look at this line of code:

button1.onclick = pressingNumber(1);

What does this do? It calls the function pressingNumber and assigns its return value to button1.onclick .

So what does pressingNumber(1) return? Well, nothing, since pressingNumber has no return statement.

So you're assigning nothing to button1.onclick , and then wondering... why is it doing nothing? ;)

One of the things you'll learn is that if you just read your code aloud, explaining what it does step by step, you'll quickly solve your own problems. I have a rubber duck on my desk that I explain things to, and most of the time that's all I need to solve a problem.

In this case, you want to stick with the original code. It assigns the function itself , it doesn't call it. It is only called when onclick triggers.

Answer 2

Note that onclick events always come with a link to the div that triggered the event. You should make use of that to capture which button was clicked. e in below function will refer to the clickevent. e.target will refer to the div, e.target.id will refer to the id of said div.

function buttonClicked(e){
    console.log(e.target.id);
    console.log('clicked in',document.getElementById(e.target.id).parentNode.id);
}

You could then attach said function to your div like so.

document.getElementById(buttonDivName).addEventListener("click", buttonClicked)

Answer 3

In this particular case, this is your shortest method

<input type="button" value="1" onclick="pressNumber(1)">
<input type="button" value="2" onclick="pressNumber(2)">

function pressNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}  

The problem in your original code was that you are calling a function with () in a place where you have to assign a function.

Answer 4

You can use

button1.addEventListener("click", pressingNumber(1));
button2.addEventListener("click", pressingNumber(2));
button3.addEventListener("click", pressingNumber(3));