Таймер не работает/JavaScript/innerHTML null

У меня проблема с моим таймером. На самом деле я новичок, и ООП для меня все еще черная магия, я стараюсь понять это ...Таймер не работает/JavaScript/innerHTML null

В этом случае я не могу понять, где проблема, почему объект не найден. ..

заранее спасибо;)

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; 
}

// 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(); 
};

Спасибо

источник

2016-11-15 Ernesto

У вас есть несколько ошибок в области видимости переменных, функций и т.д., которые в настоящее время называются. Большинство из них находятся в 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: (исправления других проблем, не упомянутые в первоначальном вопросе)

// 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(); 
};

источник

2016-11-15 19:18:30

это работа, но CountDown не работает, когда я нажимаю Play снова – Ernesto

Потому что вы никогда не вызываете обратный отсчет в 'start()'. –

поэтому я установил this.countDown (10, «timer»); в GAME.prototype.start = function(), между this.randomShow(); и this.interval(); но когда я нажимаю игру снова, он начинает отсчет, но через 7-8 секунд игра закончена и снова запускается функция ... могу ли я попросить вас дать какой-то намек? – Ernesto

Таймер не работает/JavaScript/innerHTML null

ответ

Смежные вопросы