Accessing dynamically incremented variable JS

Question

I'm playing around with making a little game in JS. There's a day counter that increments every seconds through setInterval(). I would like to access the incremented variable daycount from inside the main new_game() function to trigger game events based on days that have passed.

Would appreciate if someone could help or point me in the right direction.

var day = $('#time');
var daycount = 0;

$(document).ready(function () {
    $('#start').click(function () {
        new_game();
        $(this).addClass('disabled').html('Started');
    })
});

function time() {
    setInterval(function () {
        daycount++;
        day.html('Day ' + daycount);
        return daycount;
    }, 1000);
}

function new_game() {
    time();

    if(daycount == 5){
        alert('something');
    }

}

day.html('Day ' + count); should be day.html('Day ' + daycount); to start with. Secondly, you will only see if alert dialog if you click the start button when the daycount is exactly 5 — user184994
– user184994, Commented Oct 21, 2017 at 13:42

charlietfl · Accepted Answer · 2017-10-21 13:52:24Z

1

You could pass a callback function to time()

You can not return inside the setTimeout callback as there is nothing to return to.

Also as it stands now you are only checking dayCount when the new_game() is initialized....not each time it changes in the interval timer

let daycount = 0,
  day = $('#day');

function time(callback) {
  setInterval(function() {
    daycount++;
    day.html('Day ' + daycount);
    callback(daycount);
  }, 1000);
}

function new_game() {
  function checkCount(daycount) {
    if (daycount == 5) {
      console.log('Is 5');
    } else {
      console.log('Not 5');
    }
  }
  time(checkCount);
}

new_game()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="day">

edited Oct 21, 2017 at 13:52

answered Oct 21, 2017 at 13:47

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklesh Raut · Accepted Answer · 2017-10-21 13:50:18Z

1

It should be daycount not count here day.html('Day ' + daycount);

var day = $('#time');
var daycount = 0;

$(document).ready(function () {
    $('#start').click(function () {
        new_game();
        $(this).addClass('disabled').html('Started');
    })
});

function time() {
    setInterval(function () {
        daycount++;
        day.html('Day ' + daycount);
        if(daycount == 5){
            alert('something');
        }
        //return daycount;
    }, 1000);
}

function new_game() {
  console.log("new_game called ");
    time();
    
    

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">...</div>
<div id="start">Click me </div>

edited Oct 21, 2017 at 13:50

answered Oct 21, 2017 at 13:43

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

2 Comments

maximakesthings Over a year ago

Edited the count to daycount. Was an error on my side but it still doesn't work. How would I write it so I can use the if syntax described ?

Niklesh Raut Over a year ago

@max.dng : put if condition inside setInterval updated my answer,

Community · Accepted Answer · 2020-06-20 09:12:55Z

In addition to the requested functionality:

clearInterval() is added to prevent setInterval() from counting continuously.
<input> is added so the user can set the end count.

Details commented in demo

Demo

var day = $('#time');
var daycount = 0;

$(document).ready(function() {
  $('#start').on('click', function() {

    /* Assign counter as the timer() function
    || running every second.
    */
    var counter = setInterval(timer, 1000);

    /* Define timer() function to display the
    || daycount increments as the value of
    || output#time
    || When daycount reaches the value of user
    || input of input#end, run the 
    || stop() function
    */
    function timer() {
      daycount++;
      day.val('Day ' + daycount);
      if (daycount === Number($('#end').val())) {
        stop();
      }
    }

    /* Define stop() function
    || clearInterval of counter() function
    || thereby stopping the count from going 4eva
    || log the count
    */
    function stop() {
      clearInterval(counter);
      console.log('Day ' + daycount);
    }

    $(this).addClass('disabled').html('STARTED');
  });
});

button,
input,
output {
  font: inherit
}

input {
  width: 5ch
}

.disabled {
  pointer-events: none
}

<input id='end' type='number' min='0' max='999'>
<button id='start'>START</button>
<output id='time'></output>








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

Collectives™ on Stack Overflow

Accessing dynamically incremented variable JS

3 Answers 3

Comments

2 Comments

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Related