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

Question

Я пытаюсь получить значение кнопки в своем текстовом поле, которое работает нормально, если я использую <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

Buttons имеют innerHTML но INPUTs нет. Вы должны проверить, если имя тега элемента является Input или Button

Проверить этот обновленный 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. Так что в вашем коде должен быть

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

это выше код, который вы разместили в jsfiddle ...

если вы используете означает, что вы даете значения от

Inseated этого var cntrl = $(this).html(); Использование var cntrl = $(this).val();

рабочая версия была обновлена ​​ниже ссылки

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

Answer 4

Если вы используете [<button>], то вы должны использовать $('.class').text(); В случае, если вы используете [<input type="button">], то $('.class').val(); будет работать нормально.

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

надеюсь, что это поможет кому-то!