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

Niet the Dark Absol · Accepted Answer · 2015-10-14 10:01:41Z

3

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.

answered Oct 14, 2015 at 10:01

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

Arun Over a year ago

he can directly pass value from html like function(value),instead of writing separate functions,am i right?

Charlie · Accepted Answer · 2015-10-14 10:11:03Z

1

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.

answered Oct 14, 2015 at 10:11

Charlie

24k12 gold badges65 silver badges96 bronze badges

Comments

WouldBeNerd · Accepted Answer · 2015-10-14 10:07:24Z

1

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)

answered Oct 14, 2015 at 10:07

WouldBeNerd

68713 silver badges35 bronze badges

Comments

amitguptageek · Accepted Answer · 2015-10-14 10:05:18Z

0

You can use

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

answered Oct 14, 2015 at 10:05

amitguptageek

5373 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to handle events simpler in javascript?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related