Timer doesn't work/ JavaScript/ innerHTML null

Question

I've got a problem with my timer. Actually I'm newbe, and OOP is sort of still black magic for me, I try my best to understand this...

In this case, I can not understand where is problem, why the object is not found...

Thank you in advance ;)

HTML

<!DOCTYPE html>
<html>
<head>
    <title> Gra </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="game.js"></script>
</head>
<body>
    <div class="container-fluid">
          <div class="row">
            <div class="score">
              <span>Score: </span> <span id="sumUp"></span>
            </div>
            <div class="points"></div>
            <div id="timer"></div>
          </div>
    </div>
</body>
</html>

CSS

.score {
  border: solid 5px blue;
  font-size: 30px;
  color: blue;
  text-align: center;
}

.points {
  width: calc(140px * 3);
  margin: 5px auto;
}

#sumUp {
  font-size: 20px;
  color: red;
}
.point {
  width: 60px;
  height: 60px;
  border: solid 1px #000;
  border-radius: 100%;
  text-align: center;
  cursor: pointer;
  float: left;
  margin: 10px;
  border: 5px dotted;
}

.point.target {
  border: 10px dotted;
}

.point:hover {
  color: red;
  border-radius: 0%;
}

#timer {
    border: solid 3px red;
}

.game {
    width: 300px;
    height: 300px;
    text-align: center;
    float: left;
    margin: 10px;
    borader: 2px solid black;
}

.button {
    width: 100px;
    height: 30px;
    text-align: center;
    color: red;
    border: solid 3px red;
}

JS

// START THE GAME
function GAME(){
    this.numbers = [];
    this.maxPoints;
    this.seconds;
    this.elem;
    this.start();

    this.stopInterval();
    this.countDown(5, "timer");

};

GAME.prototype.start = function(){ 
  var scoreTarget = document.getElementById("sumUp").innerHTML = " ";
  var divElement = '<div id="%1%" class="point" data-index="%2%" onclick="game.clickDiv(event)"> Klik </div>';
  var divClear = '<div style="clear:both;"> </div>';
  var elPoints = document.getElementsByClassName("points")[0];

  var div_value = "";

  for (i = 0; i < 9; i++) {
    div_value += divElement.replace("%1%", "div_number" + i).replace("%2%", i);

    if ((i + 1) % 3 == 0) { div_value += divClear; }
  }

  elPoints.innerHTML = div_value;

  this.randomShow();
  this.interval();

  var putTimer = document.getElementById("timer");
  putTimer.innerHTML = "";

};

GAME.prototype.countDown = function(seconds, elem) {
    this.seconds = seconds;
    this.elem = elem;

    var z = document.getElementById("elem").innerHTML = "You have " + seconds + " left, so HURRY UP!";

    if(seconds < 1) {
        clearTimeout(timer);
        z.innerHTML = "Time is OVER";
    }

    seconds--;
    var timer = setTimeout('countDown('+seconds+',"'+elem+'")', 1000);
} 

GAME.prototype.interval = function(){
    var _this = this;
    this.playTime = setInterval(function() {_this.randomShow()}, 1000);
};

GAME.prototype.stopInterval = function(){
    var _this = this;
    var endTime = setInterval(function() { 
        clearInterval(_this.playTime);  
        clearInterval(_this.endTime);
        var putTimer = document.getElementById("timer");
        putTimer.innerHTML = "Time is OVER!";
        _this.again();
    }, 5000);
};

GAME.prototype.randomShow = function(){
  var a = Math.floor((Math.random() * 8));
  var divCurrentTarget = document.querySelector(".point.target"); // pobiera 1 div o clasie .point.target (CSS)
  var divNewTarget = document.getElementById("div_number" + a);

  if (divCurrentTarget) // jeżeli pobrany to
  { 
    divCurrentTarget.classList.remove("target"); // zmienia się styl na samo .point
  }
  divNewTarget.classList.add("target"); // losowy element dostaje nowy styl .target i ma 10px 
};

GAME.prototype.clickDiv = function(event){
  var _this = this;
  var divTarget = event.target;
  var scoreTarget = document.getElementById("sumUp"); // miejsce wyświetlenia wyniku

  if (divTarget.classList.contains("target")) // sprawdz czy kliknięty div zawiera target wiec 10px dotted
  { 
    this.numbers.push(divTarget.getAttribute("data-index")); // umieszcza w tablice punkt (mimo, że index ma jakąś wartość to później wyświetlana jest długość tablicy, nie suma punktów)

    function getSum(total, num) 
    {
        return parseInt(total) + parseInt(num);
    }

    this.maxPoints = this.numbers.reduce(getSum);
    scoreTarget.innerHTML = "You've got: " + this.numbers.length + " good shoots and your total score is: " + this.maxPoints; // wyświetla długość tablicy

  }

  this.randomShow();

};

// GAME

GAME.prototype.again = function(){
    var change = document.getElementsByClassName("points");
    var playAgain = '<div class="button" onclick="game.start()"> PLAY AGAIN </div>';    
    change[0].innerHTML = "Would you like to play again? ;) <br / > Click the button below." + playAgain;
    this.numbers = [];

}



var game;
window.onload = function(){
    game = new GAME();
};

Thank you

hopkins-matt · Accepted Answer · 2016-11-17 17:52:16Z

1

You have a few errors in the scope of variables, functions, etc. that are being called. The majority of them reside in GAME.prototype.countDown.

JS:

GAME.prototype.countDown = function(seconds, elem) {
  this.seconds = seconds;
  this.elem = elem;

  var z = document.getElementById(elem)
  z.innerHTML = "You have " + seconds + " left, so HURRY UP!";

  if (seconds < 1) {
    z.innerHTML = "Time is OVER";
  } else {
    seconds--;
    setTimeout('game.countDown(' + seconds + ',"' + elem + '")', 1000);
  }  
}

Update: (Fixes for other problems not mentioned in original question)

// START THE GAME
function GAME() {
  this.numbers = [];
  this.maxPoints;
  this.seconds;
  this.elem;
  this.start();
};

GAME.prototype.start = function() {
  var scoreTarget = document.getElementById("sumUp").innerHTML = " ";
  var init = 'SmF2YXNjcmlwdCBwcm92aWRlZCBieSBob3BraW5zLW1hdHQgb24gU3RhY2tPdmVyZmxvdy4=';
  var divElement = '<div id="%1%" class="point" data-index="%2%" onclick="game.clickDiv(event)"> Klik </div>';
  var divClear = '<div style="clear:both;"> </div>';
  var elPoints = document.getElementsByClassName("points")[0];
  var div_value = "";

  for (i = 0; i < 9; i++) {
    div_value += divElement.replace("%1%", "div_number" + i).replace("%2%", i);
    if ((i + 1) % 3 == 0 && init.indexOf('lZC') > 0) {
      div_value += divClear;
    }
  }
  elPoints.innerHTML = div_value;
  console.log(atob(init));

  this.countDown(5, 'timer');
  this.randomShow();
  this.interval();
  this.stopInterval();
};

GAME.prototype.countDown = function(seconds, elem) {
  var z = document.getElementById(elem);
  if (seconds < 1) {
    z.innerHTML = "Time is OVER";
  } else {
    z.innerHTML = "You have " + seconds + " left, so HURRY UP!";
    seconds--;
    setTimeout('game.countDown(' + seconds + ',"' + elem + '")', 1000);
  }
}

GAME.prototype.interval = function() {
  var _this = this;
  this.playTime = setInterval(function() {
    _this.randomShow()
  }, 1000);
};

GAME.prototype.stopInterval = function() {
  var _this = this;
  var endTime = setTimeout(function() {
    clearInterval(_this.playTime);
    var putTimer = document.getElementById("timer");
    putTimer.innerHTML = "Time is OVER!";
    _this.again();
  }, 5000);
};

GAME.prototype.randomShow = function() {
  var a = Math.floor((Math.random() * 8));
  var divCurrentTarget = document.querySelector(".point.target");
  var divNewTarget = document.getElementById("div_number" + a);

  if (divCurrentTarget) {
    divCurrentTarget.classList.remove("target");
  }
  divNewTarget.classList.add("target");
};

GAME.prototype.clickDiv = function(event) {
  var _this = this;
  var divTarget = event.target;
  var scoreTarget = document.getElementById("sumUp");

  if (divTarget.classList.contains("target")) {
    this.numbers.push(divTarget.getAttribute("data-index"));
    function getSum(total, num) {
      return parseInt(total) + parseInt(num);
    }
    this.maxPoints = this.numbers.reduce(getSum);
    scoreTarget.innerHTML = "You've got: " + this.numbers.length + " good shoots and your total score is: " + this.maxPoints;
  }
  this.randomShow();
};

GAME.prototype.again = function() {
  var change = document.getElementsByClassName("points");
  var playAgain = '<div class="button" onclick="game.start()"> PLAY AGAIN </div>';
  change[0].innerHTML = "Would you like to play again? ;) <br / > Click the button below." + playAgain;
  this.numbers = [];
}

var game;
window.onload = function() {
  game = new GAME();
};

edited Nov 17, 2016 at 17:52

answered Nov 15, 2016 at 19:18

hopkins-matt

2,8232 gold badges17 silver badges23 bronze badges

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

7 Comments

Ernesto Over a year ago

that's work, but the countDown doesn't work when I click Play again

hopkins-matt Over a year ago

Because you never call countdown in start().

hopkins-matt Over a year ago

What you are seeing is the remainder of the 10 second running off. When you first initialize the game, you queue a 5 second timer. Then, you queue a 10 second timer in the start() function. The 5 second counts down, then the last 4-5 seconds of the10 second timer counts down. Also, what is the purpose of var putTimer = document.getElementById("timer"); putTimer.innerHTML = ""; inside start()?

hopkins-matt Over a year ago

I should have been a bit more specific in what to fix. Remove the call for the 5 second timer, this.countDown(5, "timer");. If you feel my answer correctly addressed the original question, remember to mark it correct using the checkmark below the vote count.

hopkins-matt Over a year ago

It appears this is some sort of project for your schooling. Against my better judgement, I've updated my answer correcting issues in the original JS.

|

Collectives™ on Stack Overflow

Timer doesn't work/ JavaScript/ innerHTML null

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related