I try to change the text of an <p> element every 100ms. Every 100ms the number bees n + 1. This loop only gets executed when the user clicks the screen. If the user stops that the loop bee stopped.

Now the problem is that the current value of the variable scoren always starts with 0. That's not how a score works. How can I edit the code that scoren only starts at page load with 0 and resumes after the second mousedown with the current value? Also how can I save the scoren value after mouseup and resumes with the value?

I've made a fiddle for that.

<p id="score">score:</p>

var loop;

function game() {
    var scoren = 0;
    score = setInterval(function() {
        scoren += 1;
        $('#score').text('score:' + scoren);
    }, 100);
}   

$(document).mousedown(function() {
    game();
});

$(document).mouseup(function() {
    clearInterval(score);
});

I try to change the text of an <p> element every 100ms. Every 100ms the number bees n + 1. This loop only gets executed when the user clicks the screen. If the user stops that the loop bee stopped.

Now the problem is that the current value of the variable scoren always starts with 0. That's not how a score works. How can I edit the code that scoren only starts at page load with 0 and resumes after the second mousedown with the current value? Also how can I save the scoren value after mouseup and resumes with the value?

I've made a fiddle for that.

<p id="score">score:</p>

var loop;

function game() {
    var scoren = 0;
    score = setInterval(function() {
        scoren += 1;
        $('#score').text('score:' + scoren);
    }, 100);
}   

$(document).mousedown(function() {
    game();
});

$(document).mouseup(function() {
    clearInterval(score);
});

• javascript
• jquery

• make your variable scoren global, don't put it inside the function game(). When it's inside the function, it'll always start at 0. When you make it global (e.g. putting it outside the function) you'll start with the value that it stored in that variable. – Jorrex Commented Mar 30, 2016 at 13:51

4 Answers 4

You need to learn first how scopes works in javascript. You are reinitializing on every mousedown the scoren variable. Make this:

var loop;
var scoren = 0;
function game() {
  score = setInterval(function() {
    scoren += 1;
    $('#score').text('score:' + scoren);
  },100);

}   

$(document).mousedown(function() {
  game();
});

$(document).mouseup(function() {
  clearInterval(score);
});

You need to take your var scoren = 0; line outside your function.

var loop;
var scoren = 0; //This line is important
function game() {

score = setInterval(function() {
    scoren += 1;
     $('#score').text('score:' + scoren);
},100);



}   
    $(document).mousedown(function() {
    game();
});

$(document).mouseup(function() {
clearInterval(score);
});

Try this ;)

var scoren = 0;

/* cache object to improve performance */
var scoreBoard = $('#score');

function game() {
  score = setInterval(function() {
    scoreBoard.text(++scoren);
  }, 100);
}   

$(document).mousedown(function() {
  game();
});

$(document).mouseup(function() {
  clearInterval(score);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>score:<span id="score"></span></p>

Here is another way you could do it. You could create an object that is reusable:

var loop;
var game = new Game();
function Game() {
    this.scoren = 0;
    this.score = null;
    this.start = function () {
    this.score = setInterval(function(currentGame) {
        	currentGame.scoren += 1;
        	$('#score').text('score:' + currentGame.scoren);
    	}.bind(null, this), 100);
    }
    this.stop = function () {
    	clearInterval(this.score);
		}
}

$(document).mousedown(function() {
    game.start()
});

$(document).mouseup(function() {
    game.stop();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="score">score:</p>

Instead of creating a new Game() every time someone clicks you can re-use the same Game() object...