javascript - Append button's value to input text , every time button is clicked - Stack Overflow

admin管理员组

文章数量:1320878

Let me show you a piece of my code so you know what I'm struggling with.

<input type="text" id="input" />

This is the input element I am talking about. What I want to do is put the value of :

<input type="button" id="b1" value="1" />

in the textbox everytime the button is clicked.

A side question I can't google because it's part of searching syntax.

What is the difference between "" and '' (with something in-between) and when do you use one of them?

EDIT: Right now the click event is adding the value of the button to the textbox. But not to the text inside the textbox! IT just literally adds it, as if the textbox is a division or something.

The jquery/javascript code

$("#b1").click(toev);

function toev(){           
               $("#input").text($(append($(this).val())));
                };

Let me show you a piece of my code so you know what I'm struggling with.

<input type="text" id="input" />

This is the input element I am talking about. What I want to do is put the value of :

<input type="button" id="b1" value="1" />

in the textbox everytime the button is clicked.

A side question I can't google because it's part of searching syntax.

What is the difference between "" and '' (with something in-between) and when do you use one of them?

EDIT: Right now the click event is adding the value of the button to the textbox. But not to the text inside the textbox! IT just literally adds it, as if the textbox is a division or something.

The jquery/javascript code

$("#b1").click(toev);

function toev(){           
               $("#input").text($(append($(this).val())));
                };

• javascript
• jquery
• text
• input

Share Improve this question Follow edited Dec 16, 2013 at 16:07 Charaf JRA 8,33411 gold badge3535 silver badges4444 bronze badges asked Dec 16, 2013 at 15:42 ZeretilZeretil 29711 gold badge33 silver badges2121 bronze badges 9

• Show what you have tried.? – Rajaprabhu Aravindasamy Commented Dec 16, 2013 at 15:43
• 1 I think that something went wrong with your formatting. Try using the "{}" icon in the editor to show something as code. – Katana314 Commented Dec 16, 2013 at 15:43
• 1 developer.mozilla/en-US/docs/Web/JavaScript/Guide/… – SLaks Commented Dec 16, 2013 at 15:44
• 1 @Katana314 What do you mean? It looks normal to me. @ Rajaprabhu Aravindasamy $("#b1").click(toev); function toev(){ $("#input").append(this.val()); }; – Zeretil Commented Dec 16, 2013 at 15:46
• 1 @Zeretil That's because someone edited your question for you. It used to look like this: stackoverflow./revisions/20614814/1 Your HTML wasn't formatted as a code block (by offsetting it with 4 spaces). – apsillers Commented Dec 16, 2013 at 15:47

 |  Show 4 more ments

6 Answers 6

Sorted by: Reset to default 3

Do you want something like this :DEMO

$('#b1').click(
    function(){
        $('#input').val($('#input').val()+$(this).val());
    }
);

Use plain javascript for this simple task. Get button id, then add its value to input. Example:

document.getElementById('b1').onclick = function() {
   document.getElementById('input').value += this.value;
};

And if you want to clear all contents of textbox and then add value:

document.getElementById('b1').onclick = function() {
   document.getElementById('input').value = this.value;
};

How are you currently trying at set the value attribute to 1 upon button click?

There is no difference between '' and "" other than you can use single quotes inside of double quotes without having to escape the characters, and vise versa:

"I like to eat 'cheese'." vs "I like to eat \"cheese\"."

'Do you like to eat "cheese"?' vs 'Do you like to eat \'cheese\'?'

Which ever one you decide to use depends on code style or whether it makes your coding easier. As Mark pointed out, this might not always be the case across all languages.

What it sounds like you want to do is

-Have a textbox (I'm assuming not read only)

-Have a button with an event handler

-On the "Click" of a button change the value in the text box.

via jQuery

//button handler
$('#b1').click(function () {
   $('#input').val(1)
});

Breakdown of what is happening:

$('#b1')                 //jQuery selector to select the button element by it's ID
.click(function () { }); //the function to be called when you click the button
$('#input')              //jQuery selector to select the input (textbox) element
.val(1)                  //Set the input (textbox) value to 1

For your second question "" vs ''. In javascript there is no real difference and they can be used interchangably, and inside each other "''" or '""' which will often e up. In different languages this might not be the case, Ex C# "" == string, where '' == char, etc.

well, what i could understand from your question, you want to put value insise textbox. you can do the fowwling.

its better that you provide ID or class to input type="text" or else this would put values inside all textbox available on page

 $('#b1').click(function() {
        $('#input').val("whatever value you want");
    });

if you want button value to go inside textbox, you can do following..

$('#b1').click(function() {
     var btnValue = $(this).val();            
    $('#input').val(btnValue );
 });

This assigns the value also in DOM, therefore you can create a button to delete the value if you like or mistyped.

$('#b1').click(
    function(){
            var inputValue  = $('#input').val();
            var input       = $('#input');
            var buttonValue = $(this).val();
            var newInputValue = inputValue + buttonValue;
            input.attr('value',newInputValue );
    }
);

本文标签： javascriptAppend button39s value to input textevery time button is clickedStack Overflow