html- <input type=button> 和

Question

I'm trying to get a button value in my textarea which is working fine if I use <button> but if I use <input type=button> then it not works. Could you find out what is the problem?

HTML

<textarea id="txt-area" readonly></textarea>
<button class="buttons">1</button>
<button class="buttons">2</button>
<button class="buttons">3</button>
<button class="buttons">4</button>
<input type="button" class="buttons" value=" Test">

JavaScript

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });
    });
});

My code is also in this jsFiddle

Answer 1

For you have to get value but not innerHTML. So in your code it should be

var cntrl = $(this).html() || $(this).val();

Answer 2

 <textarea id="txt-area" readonly></textarea>
 <button class="buttons">1</button>
 <button class="buttons">2</button>
 <button class="buttons">3</button>
 <button class="buttons">4</button>
 <input type="button" class="buttons" value=" Test">

$(document).ready(function () {
$(".buttons").click(function () {
    var cntrl =  $(this).html();
    $("#txt-area").val(function (_, val) {
        return val + cntrl + ","
    });
});
});

this the above code you have posted in jsfiddle...

if you use means you are giving values

Inseated of this var cntrl = $(this).html(); Use var cntrl = $(this).val();

working version has been updated below link

http://jsfiddle.net/cPYCV/32/

Answer 3

BUTTONs have innerHTML but INPUTs don't. You need to check if the element's tag name is Input or Button

Check this updated fiddle

$(document).ready(function () {
    $(".buttons").click(function () {
        var cntrl = $(this).html();
        if ($(this)[0].nodeName == "INPUT" )
        {
                cntrl = $(this).attr( "value" );
        }
        $("#txt-area").val(function (_, val) {
            return val + cntrl + ","
        });
    });
});

Answer 4

If you are using [<button>] , then you should use $('.class').text(); In case you are using [<input type="button">] , then $('.class').val(); would work fine.

Answer 5

 $(document).ready(function () { $(".buttons").click(function () { var cntrl = $(this).html() || $(this).val();; $("#txt-area").val(function (_, val) { return val + cntrl + "," }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <textarea id="txt-area" readonly></textarea> <button class="buttons">1</button> <button class="buttons">2</button> <button class="buttons">3</button> <button class="buttons">4</button> <input type="button" class="buttons" value="Test"> 

hope this help someone!