jQuery: How to add div with a dynamic id that increments when button is clicked?

Question

I have this problem in jQuery:

I have a button that when clicked calls a function to create a div with an incremental id, equal to the number of clicks made. Here's my simplified solution:

$(document).ready(function() {
  var count = 0;
});

$("#button").click(function() {
  count = count + 1;
  addDiv(count);
});

But, if I define the function click here, the id on my div is NaN while if I put the function of click in document.ready(), it creates two divs. I only want to create a div with incremental Id for each click!

Have a look at what `var` does and how variables defined with `var` work: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var — Andreas, Nov 22 '18 at 18:45
I think the problem is that you have to change the elements attribute and not just a javascript variable — tobifasc, Nov 22 '18 at 18:53
The problem is in [variable scope](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) check http://jsfiddle.net/f9ug1dyv/ — Mohammad, Nov 22 '18 at 18:57

score 1 · Answer 1 · answered Nov 22 '18 at 18:57

1

try this

var count=0;
$(document).ready(function(){
  $("#add-div").click(function(){
    count++;
    $("body").append('<div id="'+count+'">div number '+count+'</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button id="add-div">add div</button>
<br>
<br>
</body>

answered Nov 22 '18 at 18:57

Abdulsattar Alkhalaf

394
1
6

Please, Don't just *"Try this"*. Explain in a couple of paragraph why this works. – Roko C. Buljan Nov 22 '18 at 19:02
thanks, but this is a simple code, he will know the error – Abdulsattar Alkhalaf Nov 22 '18 at 19:04

score 1 · Answer 2 · answered Nov 22 '18 at 19:09

1

This was due to scope issue. Try this code:

  $( document ).ready(function() {
      var count =0;
      console.log(count);
   $( "#button" ).click(function() {
       count=count+1;
       addDiv(count);
    });
    });

answered Nov 22 '18 at 19:09

Jahanzeb Awan

164
12

You can remove console.log statement I used this for debugging purpose. – Jahanzeb Awan Nov 22 '18 at 19:11

score 0 · Answer 3 · answered Nov 22 '18 at 19:00

This is because of the scoping issue of count variable. Please note that JavaScript variables are accessible in scoping scenarios (block level scoping or function level scoping). More info here What's wrong with your code is you have declared the count variable in one function and you are accessing it outside of it which is not allowed. Only to fix your code, I have made the count variable as global and now it will work as expected.

Note: Please note that global variables can be accessed anywhere in the execution context, so can be used with utmost care.

  $( document ).ready(function() 
  {
     //var count =0;
  });

var count=0;
$('#button').on('click', function(){ 
count = count + 1;
alert(count);
});


//$( "#button" ).click(function() {
//     count=count+1;
//     addDiv(count);
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='button'>Click Me</button>

score 0 · Answer 4 · answered Nov 22 '18 at 19:05

if you define a variable within a function, it is restricted only to this function, if you set it to a global scope, which is what you need in this case, the variable becomes available for all functions that are under this scope, look:

//global scope
var count = 0;
  $( "#button" ).click(function() {
    //function restrict scope
    $('#increment').append(`<div>${count}</div>`)
    count++;
   });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
    <button id="button">Click Me!</button>
    <div id="increment">
    </body>

See more at this page

score 0 · Answer 5 · answered Nov 22 '18 at 19:22

It's a scope problem. If you don't want to expose variables to the outer scope, you can use a closure.

let addDiv = function(){
    let counter = 0;
    return function(){
        counter++;
        let wrapper = $("#someDiv");
        wrapper.append(`<div> id: ${counter}</div>`)
    }
}();
button.on("click", function(){
  addDiv();
});

jQuery: How to add div with a dynamic id that increments when button is clicked?

5 Answers5