How to get the desired array from an array list in JavaScript

Question

I'm creating a calculator just to learn more about jQuery and JavaScript. I've created buttons for each number from 0 to 9. As the buttons are clicked the textbox should have the clicked value in. I wanted to create an array which contains all the values from 0 to 9 and the mathmetical signs, that's where I've failed. What I'm trying to do is instead of copying and pasting the code below to be able to get my buttons work, I want an array that can dynamically achieve it at once.

This is the necessary part of my code:

jQuery(document).ready(function () {
        var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
        jQuery(".numbers").on('click', function () {
            jQuery("#textbox").val(jQuery("#textbox").val() + numbers.valueOf());
        });
    });

See I've tried to use .valueOf() method but it gets all the components. Could you show me how it's done? I've also created a JSfiddle so perhaps you'd like to take a closer look.

Thanks in advance.

What are you trying to achieve? When clicking on #one that it adds 1 to your textbox? Why are you not just using jQuery("#textbox").val() + '1'? — putvande
– putvande, Commented Aug 14, 2015 at 11:30
I wanted to create a dynamic system for it. I've tried that before but I want to get rid of copy-paste that method for all the inputs that are required in a calculator. — Altay Mazlum
– Altay Mazlum, Commented Aug 14, 2015 at 11:34

Craicerjack · Accepted Answer · 2015-08-14 11:40:54Z

1

Beaten to the punch by others, but make it as generic as possible so youre not repeating code.

jQuery(document).ready(function () {
    jQuery("input").on('click', function () {
        jQuery("#textbox").val(jQuery("#textbox").val()+this.value);
    });
});

fiddle

edited Aug 14, 2015 at 11:40

answered Aug 14, 2015 at 11:39

Craicerjack

6,3303 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Altay Mazlum Over a year ago

Thanks! This is what I was looking for.

Vishu238 · Accepted Answer · 2015-08-14 11:38:48Z

1

Why dont you try

jQuery("#textbox").val() + numbers[0])

Click here for demo!

updated link!

or just use
give a class name to every button say "button"

jQuery(document).ready(function () {
    jQuery(".button").on('click', function () {
        jQuery("#textbox").val(jQuery("#textbox").val() + this.value);
    });
});

edited Aug 14, 2015 at 11:38

answered Aug 14, 2015 at 11:35

Vishu238

6735 silver badges18 bronze badges

3 Comments

Altay Mazlum Over a year ago

The demo does not work. It works for only 1, not the all numbers.

Vishu238 Over a year ago

I have updated the code. It will solve your problem.

Vishu238 Over a year ago

You can change the selectors accordingly. you are welcome :)

Pranav C Balan · Accepted Answer · 2015-08-14 11:34:39Z

0

Why not add a class to your buttons and use it?

jQuery(document).ready(function () {
    jQuery(".button").on('click', function () {
        jQuery("#textbox").val(jQuery("#textbox").val() + this.value);
    });
});

<input type="button" class="button" style="width:45px; height:45px;" value="1" id="one" />
<input type="button" class="button" style="width:45px; height:45px;" value="2" id="two" />
<input type="button" class="button" style="width:45px; height:45px;" value="3" id="three" />

edited Aug 14, 2015 at 11:34

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

answered Aug 14, 2015 at 11:33

biancamihai

9816 silver badges14 bronze badges

1 Comment

Altay Mazlum Over a year ago

Yes, silly me, I forgot the fact about adding a class. Thank you.

Joy Biswas · Accepted Answer · 2015-08-14 11:35:14Z

0

When you click the button the button has value we will pick that using parseInt($(e.target).val()) add to what was there

   jQuery(document).ready(function () {
          var sign = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
          jQuery("#one").on('click', function (e) {
              Query("#textbox").val(jQuery("#textbox").val() + parseInt($(e.target).val()));
          });
    });

Use the event button to get value

answered Aug 14, 2015 at 11:35

Joy Biswas

6,5371 gold badge26 silver badges50 bronze badges

Comments

Daria · Accepted Answer · 2015-08-14 11:36:53Z

0

First, you should add class to all numeric inputs. For example

<input type="button" class="number" style="width:45px; height:45px;" value="3" id="three" />

After this you easily can do what you need

$(".number").on('click', function (event) {
        $("#textbox").val($("#textbox").val() + $(event.target).val());
    });

answered Aug 14, 2015 at 11:36

Daria

2761 gold badge3 silver badges13 bronze badges

Comments

Paul Boutes · Accepted Answer · 2015-08-14 11:43:04Z

You can do the following :

(function($){

    var sign = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    var text = $('#textbox');

    $("input[type='button']").not('#equal').on('click', function () {
        var self = $(this);
        text.val(text.val() + self.val());
    });

    $("#equal").on('click', function(){
        text.val(eval(text.val()));
    });

})(jQuery);

So by using eval() method, you will be able to evaluates the JavaScript code represented as a string.

Working fiddle

Collectives™ on Stack Overflow

How to get the desired array from an array list in JavaScript

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

Comments

Comments

Related