Counting the number of clicks on the circles created by the script-CodePudding

I have a function that creates divs with a circle. Now they are all created and appear at the beginning of the page and go further in order. Next, I need each circle to appear in a random place. I did this. Now I want to add a count of clicks on these circles

To do this, I added to the code

let clicks = 0;

And in the click function itself

clicks  = 1;
document.getElementById("clicks").innerHTML = clicks;

But in the end, after clicking, the value does not exceed 1. How can this be fixed?

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  } else {
    div.style.borderColor = color;
  }
  div.classList.add("circle");
  `enter code here`
  div.classList.add("animation");

  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;

  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);
  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";

  const nodes = document.querySelectorAll('.animation');
  for (let i = 0; i < nodes.length; i  ) {
    nodes[i].addEventListener('click', (event) => {
      event.target.style.animation = 'Animation 200ms linear';
      setTimeout(() => {
        event.target.style.animation = '';
      }, 220);
    });
  }

  let clicks = 0;

  $("div").click(function() {
    clicks  = 1;
    document.getElementById("clicks").innerHTML = clicks;
    $(this).fadeOut("slow");
  });

  document.body.appendChild(div);
}

let i = 0;
const oneSecond = 1000;
setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a id="clicks">0</a></p>

CodePudding user response：

the issue come from let clicks = 0;each time method createDiv is called it reinit the value of click to 0

one way can be to get the content of #clicks and parse it to int before increment by one

one other think you already use jquery in that case to update text of #clicks you just have to use $('#clicks').text('your wanted text')

      $(div).click(function() {
        $('#clicks').text(parseInt($('#clicks').text())   1);            
        $(this).fadeOut("slclicksow");
      });

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  } else {
    div.style.borderColor = color;
  }
  div.classList.add("circle");
  div.classList.add("animation");

  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;

  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);
  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";

  const nodes = document.querySelectorAll('.animation');
  for (let i = 0; i < nodes.length; i  ) {
    nodes[i].addEventListener('click', (event) => {
      event.target.style.animation = 'Animation 200ms linear';
      setTimeout(() => {
        event.target.style.animation = '';
      }, 220);
    });
  }

  let clicks = 0;

  $(div).click(function() {
    $('#clicks').text(parseInt($('#clicks').text())   1);            
    $(this).fadeOut("slclicksow");
  });

  document.body.appendChild(div);
}

let i = 0;
const oneSecond = 1000;
setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a id="clicks">0</a></p>

CodePudding user response：

It happens because you have let clicks = 0 inside the function that creates divs. So when a new div appears it resets to 0;

To fix it just move the variable outside the function:

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

// Move here
let clicks = 0;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  } else {
    div.style.borderColor = color;
  }
  div.classList.add("circle");
  `enter code here`
  div.classList.add("animation");

  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;

  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);
  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";

  const nodes = document.querySelectorAll('.animation');
  for (let i = 0; i < nodes.length; i  ) {
    nodes[i].addEventListener('click', (event) => {
      event.target.style.animation = 'Animation 200ms linear';
      setTimeout(() => {
        event.target.style.animation = '';
      }, 220);
    });
  }

  $("div").click(function() {
    clicks  = 1;
    document.getElementById("clicks").innerHTML = clicks;
    $(this).fadeOut("slow");
  });

  document.body.appendChild(div);
}

let i = 0;
const oneSecond = 1000;
setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  background-color: #ffffff;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a id="clicks">0</a></p>