html - <input type = button>と<button>

Question

私は<button>を使用するとうまくいきますが、<input type=button>を使用すると正しく動作しているボタンの値を取得しようとしています。あなたは何が問題なのかを知ることができますか？

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 + "," 
     }); 
    }); 
}); 

私のコードは、このjsFiddle

Answer 1

ボタンでもあるinnerHTMLプロパティを持っていますが、入力はしないでください。あなたは要素のタグ名を入力またはボタン

チェックこのあなたが値を取得する必要がありますについて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 2

更新ではなく、innerHTMLプロパティであるかどうかを確認する必要があります。 は、だからあなたのコードでは、それはあなたがjsfiddleに掲載している上記のコード

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

Answer 3

<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 + "," 
    }); 
}); 
}); 

このする必要があります...

使用する場合は、値にこのの

Inseatedを与えていることを意味var cntrl = $(this).html();使用var cntrl = $(this).val();

作業バージョンが下に更新されました。

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

Answer 4

あなたが[<button>]を使用している場合は、その後、$('.class').val();が正常に動作します、あなたは[<input type="button">]を使用している場合は$('.class').text(); を使用する必要があります。

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">

これが誰かを助ける願っています！