CODEWITHSUNDEEP
javascriptloopstimewhile-loop
Hauk1
Hauk1

Reputation: 85

Creating a counter

I'm creating a counter and I'm having a hard time making it. The goal of the counter is that for ever second passed a number will increase by 170. As you can see below the number does not add up and is made on a new line, mostly because I dont know how to make it add up. Some thing like this clock from The Economist

<!DOCTYPE html>
<html>
<body>
<p>Click the button see how much AirHelps market increases by every second.</p>

<button onclick="counterFunction()">See it now</button>

<p id="counter"></p>

<script>
function counterFunction() {
setTimeout(function () {
    var text = "";
    var i = 170;
    while (i < 3500) {
        text += "<br>The number is " + i;
        i+=170;
    }, 1000) }

document.getElementById("counter").innerHTML = text;
}
</script>

</body>
</html>

Any ideas on how I can make this and what is wrong with my code?

Upvotes: 1

Views: 112

Answers (5)

Milan Rakos
Milan Rakos

Reputation: 1773

http://jsfiddle.net/mblenton/Le4vxzrn/2/

function counterFunction() {
    var text = ""; var i = 170;  var delay = 0;  var k = 1;
    while (i < 3500) {
        text = "The number is " + i;
        i += 170;
        delay = k * 1000;
        doSetTimeout(text, delay);
        k++; 
   }
 }

function doSetTimeout(text, delay) {
  setTimeout(function () {
    document.getElementById("counter").textContent = text;
 }, delay);
}

Upvotes: 1

jstuartmilne
jstuartmilne

Reputation: 4508

Ok so the adder variable should be declared outside of the timeout function, because if not you are replacing the value. and you should use setInterval

var p =0;

function counterFunction(){
setInterval(function(){ p+=170;
console.log('value of p '+p);
 }, 3000);
}

if you dont want to roll your own here is a nice counter http://keith-wood.name/countdown.html

Upvotes: 0

StriplingWarrior
StriplingWarrior

Reputation: 156614

There were a few things wrong with your code. Among other things:

  1. your i variable was declared in the wrong place to be reused
  2. your closing braces were in the wrong place for the callback function
  3. you were using a while loop, which runs synchronously, whereas you really want to just use a setInterval call.

This should work:

function counterFunction() {
  var i = 170;
  var text = "";
  var interval = setInterval(function () {
    text += "<br>The number is " + i;
    i+=170;
    document.getElementById("counter").innerHTML = text;
    if (i >= 3500) {
      clearInterval(interval);
    }
  }, 1000); 

}
<p>Click the button see how much AirHelps market increases by every second.</p>

<button onclick="counterFunction()">See it now</button>

<p id="counter"></p>

Upvotes: 0

user4639281
user4639281

Reputation:

Don't use inline JavaScript (JavaScript inside HTML element attributes), it is horrible for maintainability and readability.

You seem to have a misconception about how timeouts, intervals and while loops work, what you want is an interval.

Define a count variable outside of the event listener function, then on each iteration of the interval increment the count variable by one and multiply that number by 170.

I added a little bit in there to hide the button once it has been clicked, just to stop the user from restarting the counter.

var clicker = document.getElementById('clicker');
var counter = document.getElementById('counter');
var count = 0;

clicker.onclick = function() {
  setInterval(function () {
    counter.textContent = "The number is " + ++count * 170;
  }, 1000);
  clicker.style.display = 'none';
}
<p>Click the button see how much AirHelps market increases by every second.</p>

<button id="clicker">See it now</button>

<p id="counter"></p>

Upvotes: 5

Sterling Archer
Sterling Archer

Reputation: 22405

You need to use setInterval, not setTimeout`. Note that if you click the button, it will reset your timer.

You also need to declare var i and var text outside the scope of the Interval, or they will also be reset each iteration.

Upvotes: 0

Related Questions