Javascript 如何在html页面中通过按图像获得文本输出？

我正在使用Phonegap编写一个Android应用程序。我希望能够按下图像，例如0-9之间的数字，并作为输出在文本框中接收结果

例如，如果我按下表示数字1的图像，我在文本框中得到“1”

---

如何使用html和JavaScript实现这一点

使用jQuery，您可以这样做：

HTML

JavaScript

$( document ).ready( function () {

    var $output = $( '#output' )

    $( 'ul.buttons a' ).unbind( 'click' ).bind( 'click', function () {

        var value = $( this ).attr( 'data-value' );
        $output.val( $output.val() + value );

    } );

} );

---

Fiddle:

为每个图像赋予一个data-*属性。例如，具有属性data key='1'的图像。在点击事件中，您阅读了data-*属性，并将其附加到文本框的值下面的答案对您有帮助吗，@user1756004？是的。谢谢！我现在正试图让它与我的图像一起工作。

#output { font-size:1.6em; }

ul.buttons {
    max-width: 300px;
}
ul.buttons li {
    background: #eee;
    float: left;
    margin: 1% 1% 0 0;
    width: 30%;
}
ul.buttons li a {
    cursor: pointer;
    display: block;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

$( document ).ready( function () {

    var $output = $( '#output' )

    $( 'ul.buttons a' ).unbind( 'click' ).bind( 'click', function () {

        var value = $( this ).attr( 'data-value' );
        $output.val( $output.val() + value );

    } );

} );