CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Criss
Criss

Reputation: 85

jQuery / JavaScript incrementing value on click

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.

Upvotes: 2

Views: 112

Answers (3)

Dashang G. Makwana
Dashang G. Makwana

Reputation: 387

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/

Upvotes: 0

Pedro Lobito
Pedro Lobito

Reputation: 98881

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

Upvotes: 0

Chan
Chan

Reputation: 269

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>

Upvotes: 4

Related Questions