JavaScript Simple increment in jQuery

What I'm trying to do is a simple function, using jQuery, that would increment variables (A, B or C) depending on which button you're pressing. I'm not very good at explaining stuff, so let me just show you my code to give you the idea.

HTML:

A: <span id="a">0</span><br />
B: <span id="b">0</span><br />
C: <span id="c">0</span>
<div id="btn_holder">
  <button type="button" id="add_a">+1 A</button>
  <button type="button" id="add_b">+1 B</button>
  <button type="button" id="add_c">+1 C</button>
</div>

JS:

 var a = 0,
   b = 0,
   c = 0;

 function add(x, y) {
   x++;
   $('#' + y).html(x);
 }

 $('#btn_holder button').click(function() {
   var id = $(this).attr('id');
   switch (id) {
     case 'add_a':
       add(a, 'a');
       break;
     case 'add_b':
       add(b, 'b');
       break;
     case 'add_c':
       add(c, 'c');
       break;
   }
 });

Here's the link to JSFiddle: https://jsfiddle.net/0drdu2bq/

Now, it sort of works, but it seems to only run the function once (it adds 1 and then the button does nothing). What am I missing here?

Answer:1

Javascript uses passes arguments by value, not by reference. In your code, the function add is called with the value of variable A, which is 0. This value is stored in a new, temporary, variable X. X is the incremented by one and has it's value written to the screen. When the function ends all you did was change the value of the temporary X, not of A, so that remains at 0. The next time you call the function add, you pass in the value of A again, which is still 0 and the cycle repeats.

To fix the code, you have take the code out of the add function and put into the switch statement:

switch (id) {
    case 'add_a':
       $('#a').html(++a);
       break;
     case 'add_b':
       $('#b').html(++b);
       break;
     case 'add_c':
       $('#c').html(++c);
       break;
   }

See the full sample in this fiddle: https://jsfiddle.net/0drdu2bq/1/

Answer:2

you could use an object to hold the vales of a,b,c and use the letters as keys to the object

     var values = {
        a : 0,
        b : 0,
        c : 0
     };
    
     function add(x) {
       values[x]++;
       $('#' + x).html(values[x]);
     }
    
     $('#btn_holder button').click(function() {
       var id = $(this).attr('id');
       switch (id) {
         case 'add_a':
           add('a');
           break;
         case 'add_b':
           add('b');
           break;
         case 'add_c':
           add('c');
           break;
       }
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A: <span id="a">0</span><br />
B: <span id="b">0</span><br />
C: <span id="c">0</span>
<div id="btn_holder">
  <button type="button" id="add_a">+1 A</button>
  <button type="button" id="add_b">+1 B</button>
  <button type="button" id="add_c">+1 C</button>
</div>
Answer:3

function titleCase(str) { var one = str.split(''); for(var i = 0;i>one.length;i++) { one[i] = one[i].charAt(0).toUpperCase() + one[i].slice(1); } var final = one.join(""); return ...

function titleCase(str) { var one = str.split(''); for(var i = 0;i>one.length;i++) { one[i] = one[i].charAt(0).toUpperCase() + one[i].slice(1); } var final = one.join(""); return ...

  1. capitalization javascript string

I have an html tag, "loginBox" (<loginBox> ... </loginBox>) that drops down when a user selects an option. However, before that it is hidden with display:none. How can I make it drop down, ...

I have an html tag, "loginBox" (<loginBox> ... </loginBox>) that drops down when a user selects an option. However, before that it is hidden with display:none. How can I make it drop down, ...

  1. make element slide in

I am using revision 71. How you can see on images, i can escape some objects in vision, when i am using transparent material. Sorry, i don't know how to explain my problem better. renderer....

I am using revision 71. How you can see on images, i can escape some objects in vision, when i am using transparent material. Sorry, i don't know how to explain my problem better. renderer....

How can I remove an HTML tag, depending on what the content is? For example: <header> <h3> <a href="/category/people/">People</a> <a href="/category/hide/">...

How can I remove an HTML tag, depending on what the content is? For example: <header> <h3> <a href="/category/people/">People</a> <a href="/category/hide/">...