Prasath V Prasath V - 3 months ago 7
CSS Question

How to Count clicks on element with javascript

I just created a animation task like simple game. When you click the start game button a circle will appear on random positions at certain intervals. i have tried my best and struggling to do the following tasks :


  • Add score +1 while click on the
    <p>
    (circle) element

  • Reduce score -1 while clicking rather than the
    <p>
    (circle) element



Thanks in advance.. :)


var windowHeight = 0;
var parendElement;

function startg () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";

var interval = setInterval(function () {
generateBall();
}, 1000);
};

function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var topPos = Math.floor((Math.random() * windowHeight) - 30);
var para = document.createElement("p");
para.style.left = leftPos + "px";
para.style.top = topPos + "px";
para.setAttribute("class", 'circle');
parendElement.appendChild(para);
removeBall(para);
}
function removeBall(ele) {
setTimeout(function () {
parendElement.removeChild(ele);
}, 1000);
}

var clicks= 0;
clicks = document.getElementById('scores').valueOf();

var ballclk = document.getElementsByClassName('circle');
ballclk.onclick = function (){
clicks++;
console.log('clicks');
};

.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
background-color: blueviolet;
}
body{
overflow: hidden;
position: relative;
}
#box{
width: 100%;
height: 100%;
}
.score{
font-size: 18px;
color: red;
font-weight: bold;
}
input[type=text]
{
padding: 5px 5px;
font-weight: 600;
font-size: 15px;
width: 90px;
}
button{
padding: 4px;
}

<body>
<div class="score">
<button onclick="startg()">Start Game</button>
<label for="scores"><b>Score</b></label>
<input type="text" value="0" name="scores" id="scores">
</div>
<div id="box"></div>
</body>




Answer

To expand on Mykola's answer, not only do you need to set the value in the field itself, but you also need to create the onclick event as you're creating the ball in generateBall() for it to work. Also the return value of valueOf() is the element itself, so you need to access the value then call parseInt() to convert it to a number.

Modified code below:

var windowHeight = 0;
var parendElement;
var clicks = parseInt(document.getElementById('scores').valueOf().value);

function startg() {
  parendElement = document.getElementById("box");
  windowHeight = window.innerHeight;
  document.body.style.height = windowHeight + "px";


  var interval = setInterval(function() {
    generateBall();
  }, 1000);
};

function generateBall() {
  var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
  var topPos = Math.floor((Math.random() * windowHeight) - 30);
  var para = document.createElement("p");
  para.style.left = leftPos + "px";
  para.style.top = topPos + "px";
  para.setAttribute("class", 'circle');
  para.onclick = function() {
    document.getElementById('scores').value = ++clicks;
    console.log('clicks');
  };
  parendElement.appendChild(para);
  removeBall(para);
}

function removeBall(ele) {
  setTimeout(function() {
    parendElement.removeChild(ele);
  }, 1000);
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 30px;
  position: absolute;
  background-color: blueviolet;
}
body {
  overflow: hidden;
  position: relative;
}
#box {
  width: 100%;
  height: 100%;
}
.score {
  font-size: 18px;
  color: red;
  font-weight: bold;
}
input[type=text] {
  padding: 5px 5px;
  font-weight: 600;
  font-size: 15px;
  width: 90px;
}
button {
  padding: 4px;
}
<body>
  <div class="score">
    <button onclick="startg()">Start Game</button>
    <label for="scores"><b>Score</b>
    </label>
    <input type="text" value="0" name="scores" id="scores">
  </div>
  <div id="box"></div>
</body>

Comments