CODEWITHSUNDEEP
javascriptjquery
Björn C
Björn C

Reputation: 4008

Jquery increase value


I´m trying to increase a value fetched from the DOM.
The value is stuck in "1";
What am i doing wrong?

HTML

<div class="col-md-1">
  <button class="btn btn-success" id="btnAddFlak">+ Flak</button>
</div>
<div class="well" id="flakDiv"></div>

JS

var flakNr = 1;
//Create flak
$('#btnAddFlak').on('click', function () {

//Set flakNr
var flakNr = $('.flakMiddle').last().val();
console.log(flakNr);

//Increase flakNr
flakNr++;
console.log(flakNr);


//Flak HTML setup
var flak = $('<div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b>' + flakNr + '</b></div><div class="flakSideDown nopadding"></div></div><br>');

//Insert flak to flakDiv
$('#flakDiv').append(flak);


});

Fiddle:
http://jsfiddle.net/7hqu377v/

Upvotes: 1

Views: 57

Answers (2)

Makudex
Makudex

Reputation: 1082

i suggest that maybe you could have another variable to increment like:

var flakNr = 1;
var ctr= 0; // or any number you want

//Create flak
$('#btnAddFlak').on('click', function () {

//Set flakNr
var flakNr = $('.flakMiddle').last().val();
console.log(flakNr);

//Increase flakNr with the value ctr
flakNr+=ctr;

// increment ctr
ctr++;

console.log(flakNr);


//Flak HTML setup
var flak = $('<div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b>' + flakNr + '</b></div><div class="flakSideDown nopadding"></div></div><br>');

//Insert flak to flakDiv
$('#flakDiv').append(flak);


});

And that's it your good to go! Happy coding..

Upvotes: 0

vijayP
vijayP

Reputation: 11502

Modified your code a bit

http://jsfiddle.net/7hqu377v/1/

added <span> inside your div.flakMiddle which holds actual number. Hope this is what you are looking for.

Upvotes: 3

Related Questions