我需要一双清新的眼睛。我查看了stackoverflow的典型“无法读取属性'innerHTML'的null”，它似乎通常是由于在调用脚本进行更改之前未加载DOM元素。但是，我的错误是在点击元素后创建的，所以我认为它已经存在了。
错误的行号是FIRInstanceID.instanceID().token()函数中包含的if语句：if(document.getElementById('tile').innerHTML=="" && memory_values.length < 2 )。
我相信memoryFlipTile函数导致的错误：
newBoard()特别是，我相信我在for循环中犯了一个错误，但我不完全确定是什么。我的预感是使用onClick函数的元素没有值。
以下是完整代码：
function newBoard()
{
// TODO reset variable for tiles flipped to equal 0
var reset = 0;
// TODO create a variable for output set equal to an empty string
var output = "";
// TODO call anonymous function Array
Array.prototype.memory_tile_shuffle.call;
// TODO perform a for loop from index 0 to the length of memory_array
for(var i = 0; i < memory_array.length; i++)
{
// TODO concatenate variable "output" to equal
// '<div id="tile_'
output+='<div id = "tile_';
output+=i;
output+='" onClick="memoryFlipTile(this,\'';
output+=memory_array[i];
output+='\')"></div>';
// TODO update the document object, element id called 'memory_board', innerHTML
// so it is equal to the output variable
document.getElementById("memory_board").innerHTML=output;
}
}
答案 0 :(得分：0)
your element is generated as id="tile_1" , "tile_2" etc....
and in javascript you are using following code<br>
document.getElementById('tile').innerHTML<br>
there is no any element of "tile" id.
<br><br>
<!DOCTYPE html>
<html>
<head>
<style>
div#memory_board
{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div
{
background: pink;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
</style>
</head>
<body>
<!-- create a div with id attribute equal to "memory_board" -->
<div id = "memory_board" >
</div>
</body>
</html>
<!-- in the script tag -->
<script>
// global variable declaration
// TODO declare array "memory_array" that contains 24 items, 12 pairs (e.g. A, A, B, B, etc...)
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
// TODO declare array "memory_values" with no data
var memory_values = [];
// TODO declare array "memory_tile_ids" with no data
var memory_tile_ids = [];
// TODO declare a variable for keeping tracking of how many tiles are flipped
var tiles_flipped;
// TODO add an anonymous function to the Array object called memory_tile_shuffle
Array.prototype.memory_tile_shuffle = function()
{
// TODO declare variable "length" set equal to the length of the array
var length = memory_tile_shuffle.length;
// TODO declare variable "rand"
var rand;
// TODO declare variable "temp"
var temp;
// TODO loop while the value of --length (using predecrement) is greater than 0
while(--length > 0)
{
//TODO set variable rand equal to Math.floor(Math.random() * (length + 1))
var rand = Math.floor(Math.random() * (length + 1))
// TODO set variable temp equal to this array at index rand
var temp = memory_tile_shuffle[rand];
// TODO set this array index rand equal to this array index length
rand = memory_tile_shuffle.length;
// TODO set this array index length equal to temp
length = temp;
}
}
// TODO write function newBoard, no parameters, to reset data for the game
function newBoard()
{
// TODO reset variable for tiles flipped to equal 0
var reset = 0;
// TODO create a variable for output set equal to an empty string
var output = "";
// TODO call anonymous function Array
Array.prototype.memory_tile_shuffle.call;
// TODO perform a for loop from index 0 to the length of memory_array
for(var i = 0; i < memory_array.length; i++)
{
// TODO concatenate variable "output" to equal
// '<div id="tile_'
output+='<div id = "tile_';
output+=i;
output+='" onClick="memoryFlipTile(this,\'';
output+=memory_array[i];
output+='\','+i+')"></div>';
// TODO update the document object, element id called 'memory_board', innerHTML
// so it is equal to the output variable
document.getElementById("memory_board").innerHTML=output;
}
}
// TODO write function Tile with parameters tile and val
function memoryFlipTile(tile, val,i)
{
// TODO check if the innerHTML of object tile is equal to "" and
// the length of array memory_values is less than 2
if(document.getElementById('tile_'+i).innerHTML=="" && memory_values.length < 2 )
{
// style settings for the background of the tile object
tile.style.background = '#FFF';
// TODO set object tile innerHTML equal to the val parameter
document.getElementById("tile_"+i).innerHTML= val;
// TODO check if the length of array memory_values equals 0
if(memory_values.length == 0)
{
// TODO call function push on array memory_values passing
// val as an argument
memory_values.push(val);
// TODO call function push on array memory_tile_ids passing
// tile.id as an argument
memory_tile_ids.push(tile.id);
}
// TODO check if the length of array memory_values equals 1
else if(memory_values.length == 1)
{
// TODO call function push on array memory_values passing
// val as an argument
memory_values(val);
// TODO call function push on array memory_tile_ids passing
// tile.id as an argument
memory_tile_ids(tile.id);
// TODO check if memory_values index 0 equals memory_values index 1
if(memory_values[0] == memory_values[1])
{
// TODO update the value of variable tiles_flipped to be increased by 2
tiles_flipped += 2;
// TODO clear array memory_values
memory_values = [];
// TODO clear array memory_tile_ids
memory_tile_ids = [];
// TODO check to see if the whole board is cleared by
// comparing the number of tiles_flipped being equal to
// the length of array memory_array
if(tiles_flipped == memory_array.length++)
{
alert("The board has been cleared and a new board is being generate");
// TODO using an alert dialog box inform the user that
// the board has been cleared and a new board is
// being generated
// TODO update object document, id 'memory_board', innerHTML
// to be equal to ""
document.getElementById("memory_board").innerHTML= "";
// TODO call function newBoard
newBoard();
}
}
// otherwise
else
{
// TODO write function flip2Back so it flips the turned over tiles to
// no longer be visible
function flip2Back()
{
// Flip the 2 tiles back over
// TODO declare variable tile_1 set equal to object document,
// element id memory_tile_ids, index 0
var tile_1 = document.getElementById("memory_tile_ids[0]");
// TODO declare variable tile_1 set equal to object document,
// element id memory_tile_ids, index 1
// style settings for tile_1
tile_1.style.background = 'pink';
tile_1.innerHTML = "";
// style settings for tile_2
tile_2.style.background = 'pink';
tile_2.innerHTML = "";
// TODO clear array memory_values
memory_values = [];
// TODO clear array memory_tile_ids
memory_tile_ids = [];
}
// TODO call function setTimeout passing arguments function flip2Back
// and the value 700
setTimeout(flip2Back(),700);
}
}
}
}
newBoard();
</script>
答案 1 :(得分：0)
您似乎正在使用tile_1，tile_2等ID创建多个图块，但之后又尝试查找ID为tile的内容。没有任何内容只有tile，因此查找失败。您需要获取tile_x的元素ById，其中x是您要查找的磁贴的编号。
在你的dom中，你以＃{1}}传递对象：
this但是在你的memoryFlipTile函数中，你使用的是字符串output+='" onClick="memoryFlipTile(this,\'';
而不是正在传入的参数"tile"。在我们所在的地方你是目前通过字符串＆＃34; tile＆＃34;查找，您想要通过变量tile查看，如：
tile.id这是最低限度的复制：https://jsfiddle.net/orz89xwr/
答案 2 :(得分：0)
您需要将document.getElementById("memory_board").innerHTML=output;语句放在for循环之外，以便在输出变量中包含所有div。然后将其分配给innerhtml。