Timer 不起作用/ JavaScript/ innerHTML null
Timer doesn't work/ JavaScript/ innerHTML null
我的计时器有问题。其实我是新手，OOP对我来说还是黑魔法，我尽力去理解这一点......
在这种情况下，我无法理解问题在哪里，为什么找不到对象......
提前谢谢你;)
.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();
};
谢谢
在
被调用的变量、函数等的作用域中，您有一些错误。他们中的大多数人居住在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);
}
}
更新：(修复了原始问题中未提及的其他问题(
// 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();
};
相关文章：
- 未捕获的类型错误:无法设置属性'innerHTML'如果为null，则将脚本移动到正文不会;不起作用
- 无法设置属性'innerHTML'在javascript中为null
- 即使在 DOM 加载后也无法设置 null 的 .innerHTML
- 未捕获的类型错误:无法设置属性'innerHTML'null的:javascript
- 未捕获的类型错误:将 innerhtml 设置为数组中的字符串时，无法设置 null 的属性 'innerHTM
- getElementById TypeError: “无法将属性'innerHTML'设置为null
- Microsoft JScript运行时错误:无法获取属性'的值;innerHTML':对象为null或
- IE8:“;ln.innerHTML要么为null要么不是对象”;
- debug-json无法设置属性'innerHTML'为null
- Extjs4 MVC Xtemplate错误:无法设置属性'innerHTML'为null
- 获取错误:无法设置属性'innerHTML'为null
- 无法设置null错误的innerHTML.尽管存在html ID
- 未捕获的类型错误:无法读取属性'innerHTML'为null
- 未捕获的类型错误:无法设置属性'innerHTML'为null
- Timer 不起作用/ JavaScript/ innerHTML null
- 无法读取属性'innerHTML'使用.on()返回null
- 未捕获的类型错误:不能设置属性'innerHTML'在phonegap中为null
- 未捕获的类型错误:不能设置属性'innerHTML'ajax中的null
- 未捕获的类型错误:不能设置属性'innerHTML'在recaptcha_ajax.js中的null
- php变量提供的Null innerHTML仅在Firefox中不起作用
