jQuery / JavaScript incrementing value on click

Question

I want to make multiple divs appear in a defined time and when I click it, gives 300 Points (value), it starts with a value of 0 (punctuation) and triggers a function when the page is ready

var puntuacion = 0;
$(document).ready(function() {
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
    $newdiv = $("<div id='circle-green'></div>").css({
      'left': posx + 'px',
      'top': posy + 'px'
    });
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }
  $("#Points").text(puntuacion);
  $("#circle-green").click(function() {
    $(this).remove();
    puntuacion+=300;
    $("#Points").text(puntuacion);
  });

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
#circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

https://jsfiddle.net/k6shp80d/

but I can just click the first div, why? maybe because I'm new on JavaScript and jQuery, ask me any question or any doubt you have!, sorry for my bad english.

The points wouldn't go above 300. You have written puntuacion = +300 instead of puntuacion += 300 — Karan Punamiya
– Karan Punamiya, Commented Apr 18, 2015 at 2:50
You should make every ID on your html unique and I guess that's not happening. — Pedro Lobito
– Pedro Lobito, Commented Apr 18, 2015 at 2:51

Chan · Accepted Answer · 2015-04-18 02:59:41Z

You are creating many #circle-green divs that don't get removed, and you are calling $("#circle-green").click. Change the #circle-green to a class, not and id. Also, change the click handler and the CSS.

Fixed!

   
$(document).ready(function() {
 var puntuacion = 0;
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
    $newdiv = $("<div class='circle-green'></div>").css({
      'left': posx + 'px',
      'top': posy + 'px'
    }).click(function() {
		$(this).remove();
		puntuacion += 300;
		$("#Points").text(puntuacion);
	});
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }

  $("#Points").text(puntuacion);

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
.circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

Pedro Lobito · Accepted Answer · 2015-04-18 03:15:43Z

Your error was in puntuacion =+ 300;
The correct syntax is:

puntuacion += 300;

The final code should look like this:

var puntuacion = 0;
$(document).ready(function() {
  FadeDiv();

  function FadeDiv() {
    var posx = Math.floor(Math.random() * 300);
    var posy = Math.floor(Math.random() * 300);
$newdiv = $("<div onclick='greenFunc(this);' id='circle-green'></div>").css({
  'left': posx + 'px',
  'top': posy + 'px'
});
    $newdiv.appendTo('body').fadeIn(1000).delay(1000).fadeOut(1000, function() {
      FadeDiv();
    });
  }
  $("#Points").text(puntuacion);

  setTimeout(FadeDiv, 1000);
  setTimeout(FadeDiv, 500);
  setTimeout(FadeDiv, 100);
});

function greenFunc(element){
    $(element).remove();
    puntuacion += 300;
    $("#Points").text(puntuacion);
}

body {
  background-color: #000;
  color: #FFF;
  font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
#circle-green {
  width: 50px;
  height: 50px;
  position: absolute;
  display: none;
  background-color: #00ff00;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 1px 1px 5px 5px #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Points"></div>

DEMO: http://codepen.io/tuga/pen/zGOZrV

Dashang G. Makwana · Accepted Answer · 2015-04-18 03:19:51Z

0

use jquery onClick function and use Class instead of Id as below:

$(".circle-green").on('click',function(){

});
OR
$(document).on('click', '.circle-green', function () {
});

Hope that solves your query. https://jsfiddle.net/k6shp80d/1/

edited Apr 18, 2015 at 3:19

answered Apr 18, 2015 at 3:03

Dashang G. Makwana

3873 silver badges10 bronze badges

1 Comment

Drakes Over a year ago

Please don't ask the OP to mark your answer as "accepted answer" in your answer or ask for an upvote.

Collectives™ on Stack Overflow

jQuery / JavaScript incrementing value on click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related