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.
6 Answers 6
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);
});
});
1 Comment
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);
});
});
3 Comments
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" />
1 Comment
class. Thank you.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
Comments
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());
});
Comments
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.
#onethat it adds1to your textbox? Why are you not just usingjQuery("#textbox").val() + '1'?