CODEWITHSUNDEEP
javascriptjqueryhtmlcalculator
Guy
Guy

Reputation: 79

Javascript/HTML Button Not Showing

I am trying to create a replication of windows calculator just for the sake of practicing jquery and Javascript (a basic one of course). I have created all the html buttons already. Now I am trying to display the numbers when clicked. Apparently, only "1" is shown when it is clicked. The other numbers aren't showing.

$("button").attr("class") only works for the first button

I did make all the buttons work utilizing

$(this).on("click", ".0", function() {
        var store=$(".draft").val().concat($(".0").val());
        $(".draft").val(store);
      });

but that would mean I need to repeat this code for all the digits which isn't efficient...

How would I efficiently get it to work for the other digits?

<script>
$(document).ready(function() {
        $(this).on("click", "."+$("button").attr("class"), function() {
            var store=$(".draft").val().concat($("."+$("button").attr("class")).val());
            $(".draft").val(store);
        });
</script>

<input class="draft" type="text" style="height: 25px; width: 250px"/> <br> <br>
<button class="1" value="1" enabled style="position: center; height: 50px; width: 50px">1</button>
<button class="2" value="2" enabled style="height: 50px; width: 50px">2</button>
<button class="3" value="3" enabled style="height: 50px; width: 50px">3</button> 
<button class="divide" value="/" enabled style="height: 50px; width: 50px">÷</button> <br>
<button class="4" value="4" enabled style="height: 50px; width: 50px">4</button>
<button class="5" value="5" enabled style="height: 50px; width: 50px">5</button>
<button class="6" value="6" enabled style="height: 50px; width: 50px">6</button> 
<button class="multiply" value="*" enabled style="height: 50px; width: 50px">*</button> <br>
<button class="7" value="7" enabled style="height: 50px; width: 50px">7</button>
<button class="8" value="8" enabled style="height: 50px; width: 50px">8</button>
<button class="9" value="9" enabled style="height: 50px; width: 50px">9</button> 
<button class="subtract" value="-" enabled style="height: 50px; width: 50px">-</button> <br>
<button class="0" value="0" enabled style="height: 50px; width: 50px">0</button>    
<button class="plusminus" value="-" enabled style="height: 50px; width: 50px">+/-</button>
<button class="dot" value="." enabled style="height: 50px; width: 50px">.</button> 
<button class="add" value="+" enabled style="height: 50px; width: 50px">+</button> 
<button class="equal" value="=" enabled style="height: 50px; width: 50px">=</button>

Upvotes: 0

Views: 1458

Answers (4)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

You are better off using a single delegated event handler, connected to a parent element. This is more efficient than connecting loads of handlers:

$(function () {
    $('.calculator').on("click", "button", function () {
        // Do something with the value of the clicked button...
        $(".draft").val($(".draft").val() + $(this).val());
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/cf8csjw1/

It works by listening for events to bubble up to the ancestor element, then applying the jQuery selector, then calling your function for the element that caused the event in the first place.

Upvotes: 0

user2984081
user2984081

Reputation: 76

I think that the best option is using the same class name for each button and after that using the $(this) option to read the value.

Here I have created a simple example with your code. It´s only your code with a few changes.

JSBin Example

Upvotes: 0

Liam Schauerman
Liam Schauerman

Reputation: 841

Use jquery to access the specific button you want to target. 

$("button")

will return the first button in your DOM. Instead, target by class or ID:

$(".1") //targets the element with a class of '1'

For your problem, you can get the value of the button by using 'this':

$("button").on("click", function() {
  var value = $(this).val()
  // do something with value

});

Upvotes: 1

vurtual
vurtual

Reputation: 23

I would think put it in an each, eg

 $.each($("button"),function(){
     $(this).attr("class");
 })

or

 $("button").each(function(){
     $(this).attr("class");
 })

Upvotes: 0

Related Questions