Click one of multiple buttons, put value in text input

Question

What am I doing wrong here (http://jsfiddle.net/dsqBf/2/)?

I'm trying to put the value of the clicked button into the text input. If you click any button, the value of the last button is inserted into the text input.

JavaScript code:

var theButtons = $(".button");
$(theButtons).each(function(index) {
    currentButton = $(this);
    buttonValue = currentButton.val();
    currentButton.click(function() {
        $("#theinput").val(buttonValue);
    });
});

Am I missing a concept I'm not aware of? Thanks!

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Prefix currentButton by var. Without it, the variable's value will be assigned to a variable in the global scope, because you haven't declared currentButton anywhere else. Consequently, the value of currentButton is changed to the value of the last button (because there's only one variable).

var theButtons = $(".button");
theButtons.each(function(index) {
    var currentButton = $(this);
    var buttonValue = currentButton.val();
    currentButton.click(function() {
        $("#theinput").val(buttonValue);
    });
});

Other notes:

thebuttons is already a jQuery object, so you should not wrap it in $ again.
$("#theinput") does probably not change over time. So, I recommend to cache this variable.
The value of the current button, on the other hand, may change. I suggest to use this.value inside the click handler.
Instead of looping using each, you can also bind a click handler on the selector.

Recommended code (demo: http://jsfiddle.net/dsqBf/11/)

var $theButtons = $(".button");
var $theinput = $("#theinput");
$theButtons.click(function() {
    $theinput.val(this.value);
});

Prefixed jQuery-variables with $, because it's the convention to do so. Because of $, you (and others) know that the variable is a jQuery object, which saves expensive debugging time.

Thanks very much. What do you mean to "cache this variable"? — wkm, Feb 02 '12 at 16:37
@sloopjohnB As seen at the bottom of the answer, store the jQuery object in a variable outside the loop.click handler. — Rob W, Feb 02 '12 at 16:38

score 3 · Answer 2 · answered Feb 02 '12 at 16:30

3

You are using the .each() instead of the basic .click(). See my update.

http://jsfiddle.net/dsqBf/3/

var theButtons = $(".button");

$(theButtons).click(function() {
    $("#theinput").val($(this).val());
});

answered Feb 02 '12 at 16:30

Jack

8,851
3
21
26

score 3 · Answer 3 · edited May 23 '17 at 10:34

You are experiencing something similar to the closure-in-a-loop problem, because your variables are global.
At the time the event handler is executed, it will access buttonValue which contains the value from the last iteration of the each loop.

There are two ways to solve this: You can either make the variables local, by prepending var, or rewrite the code to:

$(".button").click(function() {
    $("#theinput").val($(this).val());
});

Nicola Peluchetti · Answer 4 · 2012-02-02T16:35:57.637

2

You should do

var theButtons = $(".button");

theButtons.click(function(index) {
    var currentButton = $(this);
    var buttonValue = currentButton.val();

  $("#theinput").val(buttonValue);

});

fiddle here http://jsfiddle.net/dsqBf/6/

edited Feb 02 '12 at 16:35

answered Feb 02 '12 at 16:30

Nicola Peluchetti

76,206
31
145
192

Click one of multiple buttons, put value in text input

4 Answers4

Recommended code (demo: http://jsfiddle.net/dsqBf/11/)

Linked