Using jQuery to click the button and display the value of the button

Question

hi i m new to jQuery and I am trying to make a jquery ajax calculator.I have created a html for the interface. However, I get stuck in the part of click function in js. I want to the display set 0 as default and i want to click the number button and display it in the display .

what ajax has to do with it? - ajax works in cooperation with a serverside code. which one do you use? php/asp/asp.net/etc... — Banana, Dec 09 '14 at 19:00
i use php in the serverside for the result but i m still trying to do it. — kings0712, Dec 09 '14 at 19:02
$("button").click(function() { $("#display").get(0).value += $(this).val();}); — Zorkind, Dec 09 '14 at 19:04

Canser Yanbakan · Accepted Answer · 2014-12-09T19:09:26.463

1

$(function(){
    // set value to 0 at first
    $('#display').val(0);

    $(document).on('click', 'button.number', function(){
        $('#display').val($(this).val());
    });
});

test here: http://jsfiddle.net/xzg70up3/

to keep numbers:

$(function(){
    var $display = $('#display');
    $display.val(0);

    $(document).on('click', 'button.number', function(){
        if($display.val() != 0) {
            $display.val($display.val() + $(this).val());
        } else {
            $display.val($(this).val());
        }

    });
});

Fiddle: http://jsfiddle.net/qohdjovu/

edited Dec 09 '14 at 19:09

answered Dec 09 '14 at 18:59

Canser Yanbakan

3,780
3
39
65

it works thank you very much but at the code it only display 1 number what if i want 2 number for example "22" – kings0712 Dec 09 '14 at 19:05
1

Too much code for a simple thing, in my opinion a += operator works better. Like i showed in my comment in the OP. I agree with the class number in the filter. – Zorkind Dec 09 '14 at 19:26
Showing the easiest and understandable way to teach him the basics. Improvements are up on him... – Canser Yanbakan Dec 09 '14 at 19:43
Thank you very much, I have learnt so much ! Your answer is clear and it really helps me in the further work. Can you explain a bit on $(document).on() ? – kings0712 Dec 09 '14 at 19:51
No problem. :) I'm glad if i can help. So, $(document).on() is catching for dom changes. If you create your buttons after your document is loaded (for example with js), $('.button').click() will not work. So, you have to use $(document).on('event'). See this: http://stackoverflow.com/questions/9418991/when-using-jquery-on-why-use-document-vs-the-element-itself – Canser Yanbakan Dec 09 '14 at 19:56
Thats really helpful sorry for the late reply! Now i m working on the backspace of the calculator:3 – kings0712 Dec 10 '14 at 17:31
@R.CanserYanbakan Sorry for asking you one more question in your answer is that mean i need to mention $(document) for every function? – kings0712 Dec 10 '14 at 17:48
Only for events and that must not be $(document).on... everytime. You can just use like $('.item').click(function... For more: http://api.jquery.com/click/ and http://api.jquery.com/on/ – Canser Yanbakan Dec 10 '14 at 17:50
@R.CanserYanbakan okay ! I get it now i m facing a problem. I would like to set max length of the text box and i add $(document).ready(function(e){ if($display.val().length >8) { var Error = "Err"; $display.val(Error); } now it is not working. Can you tell me why It is http://jsfiddle.net/NicholasLui15/r57zkv4j/ – kings0712 Dec 10 '14 at 19:21

Using jQuery to click the button and display the value of the button

1 Answers1

Linked