Question

I’m writing an Android app using Phonegap. I want to be able to press an image, for instance numbers from 0-9 and as an output receive the result in a text box.

For instance if I press image that states number one, I get “1” in my text-box.

How can it be done using html and JavaScript?

Answer 1

Using jQuery you can do it this way:

HTML

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

<ul class="buttons">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li>
    <li><a data-value="4">4</a></li>
    <li><a data-value="5">5</a></li>
    <li><a data-value="6">6</a></li>
    <li><a data-value="7">7</a></li>
    <li><a data-value="8">8</a></li>
    <li><a data-value="9">9</a></li>
</ul>

CSS

#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;
}

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: http://jsfiddle.net/kboucher/wJ9R8/