将元素设置为Javascript中的变量后返回错误
我得到了一个为Uni项目创建内存平铺游戏的指南，我在程序中遇到了一个小问题，因为我得到了错误：uncaughttypeerror:无法将属性'innerHTML'设置为null。专门针对这一行，这里document.getElementById（“内存板”）.innerHTML=output 我不明白为什么会发生这个错误，因为我将输出设置为某个值，这样它就不会为null将元素设置为Javascript中的变量后返回错误,javascript,html,debugging,Javascript,Html,Debugging,我得到了一个为Uni项目创建内存平铺游戏的指南，我在程序中遇到了一个小问题，因为我得到了错误：uncaughttypeerror:无法将属性'innerHTML'设置为null。专门针对这一行，这里document.getElementById（“内存板”）.innerHTML=output 我不明白为什么会发生这个错误，因为我将输出设置为某个值，这样它就不会为null <!DOCTYPE html> <html> <head> <
<!DOCTYPE html>
<html>
<head>
<!-- style settings-->
<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>
<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 = new 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", "M", "M", "N", "N", "O", "O", "P", "P", "Q", "Q",
"R", "R", "S", "S", "T", "T", "U", "U", "V", "V", "W", "W", "X", "X", "Y", "Y", "Z", "Z");
// TODO declare array "memory_values" with no data
var memory_values = new Array();
// TODO declare array "memory_tile_ids" with no data
var memory_tile_ids = new Array();
// TODO declare a variable for keeping tracking of how many tiles are flipped
var tiles_flipped = 0;
// 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 leng = memory_array.length;
// TODO declare variable "rand"
var rand = 0;
// TODO declare variable "temp"
var temp = 0;
// TODO loop while the value of --length (using predecrement) is greater than 0
while(--leng < 0)
{
//TODO set variable rand equal to Math.floor(Math.random() * (length + 1))
rand = Math.floor(Math.random() * (leng + 1));
// TODO set variable temp equal to this array at index rand
temp = memory_array[rand];
// TODO set this array index rand equal to this array index length
memory_array[rand] = memory_array[leng]
// TODO set this array index length equal to temp
memory_array[leng] = temp;
}
}
// TODO write function newBoard, no parameters, to reset data for the game
function newBoard()
{
// TODO reset variable for tiles flipped to equal 0
tiles_flipped = 0;
// TODO create a variable for output set equal to an empty string
var output = " ";
// TODO call anonymous function memory_tile_shuffle
memory_array.memory_tile_shuffle();
// TODO perform a for loop from index 0 to the length of memory_array
for(var index = 0; index < memory_array.length; index++)
{
// TODO concatenate variable "output" to equal
// '<div id="tile_'
output = output.concat('<div id="tile_');
// concatenate the looping variable
output = output.concat(index);
// concatenate '" nclick="memoryFlipTile(this,\''
output = output.concat('"onclick="memoryFlipTile(this,\'');
// concatenate memory_array with index of the looping variable
output = output.concat(memory_array[index]);
// concatenate '\')"></div>'
output = output.concat('\')"></div>');
}
// TODO update the document object, element id called 'memory_board', innterHTML
// so it is equal to the output variable
document.getElementById("memory_board").innerHTML = output;
}
// TODO write function memoryFlipTile with parameters tile and val
function memoryFlipTile(tile, val)
{
// TODO check if the innerHTML of object tile is equal to "" and
// the length of array memory_values is less than 2
if(tile.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
tile.innerHTML = val;
// TODO check if the length of array memory_values equals 0
if(memory_values == 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 == 1)
{
// 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 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 = tiles_flipped + 2;
// TODO clear array memory_values
memory_values.length = 0;
// TODO clear array memory_tile_ids
memory_tile_ids.length = 0;
// 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)
{
// TODO using an alert dialog box inform the user that
// the board has been cleared and a new board is
// being generated
alert("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
var tile_2 = document.getElementById(memory_tile_ids[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.length = 0;
// TODO clear array memory_tile_ids
memory_tile_ids.length = 0;
}
// TODO call function setTimeout passing arguments function flip2Back
// and the value 700
setTimeout(flip2Back, 700);
}
}
}
}
</script>
</head>
<body>
<!-- create a div with id attribute equal to "memory_board" -->
<div id = "memory_board"> </div>
<!-- in the script tag
// TODO call function newBoard-->
<script>
newBoard();
</script>
</body>
</html>
分区存储板
{
背景：#CCC；
边框：#999 1px实心；
宽度：800px；
高度：540px；
填充：24px；
保证金：0px自动；
}
div#内存板>div
{
背景：粉红色；
边框：#000 1px实心；
宽度：71px；
高度：71px；
浮动：左；
利润率：10px；
填充：20px；
字体大小：64px；
光标：指针；
文本对齐：居中；
}
//全局变量声明
//TODO声明包含24项、12对（例如A、A、B、B等）的数组“内存数组”
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”、“M”、“M”、“N”、“N”、“O”、“O”、“P”、“P”、“Q”、“Q”，
“R”、“R”、“S”、“S”、“T”、“T”、“U”、“U”、“V”、“V”、“W”、“W”、“X”、“X”、“Y”、“Y”、“Z”、“Z”）；
//TODO声明没有数据的数组“内存值”
var memory_values=新数组（）；
//TODO声明没有数据的数组“内存\u磁贴\u ID”
var memory_tile_ids=new Array（）；
//TODO声明一个变量，用于跟踪翻转的瓷砖数量
var tiles_fliped=0；
//TODO向数组对象添加一个名为memory\u tile\u shuffle的匿名函数
Array.prototype.memory\u tile\u shuffle=函数（）
{
//TODO声明变量“length”集合等于数组的长度
var leng=内存\数组长度；
//TODO声明变量“rand”
var-rand=0；
//TODO声明变量“temp”
var-temp=0；
//在--length（使用predecrement）的值大于0时执行TODO循环
而（--leng<0）
{
//TODO设置变量rand等于Math.floor（Math.random（）*（长度+1））
rand=Math.floor（Math.random（）*（leng+1））；
//TODO在索引rand处将变量temp设置为等于此数组
temp=内存_数组[rand]；
//TODO将此数组索引rand设置为等于此数组索引长度
内存数组[rand]=内存数组[leng]
//TODO将此数组索引长度设置为temp
内存_数组[leng]=temp；
}
}
//TODO写函数newBoard，无参数，为游戏复位数据
函数newBoard（）
{
//翻转为等于0的平铺的TODO reset变量
瓷砖翻转=0；
//TODO为等于空字符串的输出集创建变量
var输出=”；
//TODO调用匿名函数memory\u tile\u shuffle
memory_array.memory_tile_shuffle（）；
//TODO执行从索引0到内存数组长度的for循环
for（var index=0；index谢谢，我的目标对象确实出现在屏幕上，但原因不正确，我认为这可能是由于其他一些问题，但在您修复我的错误时，我仍然会给您正确的答案。实际上，忽略我仍然会收到错误，仍然有onclick错误，但是瓷砖渲染。是的，似乎有问题onclick和e似乎也是我的洗牌函数的一个问题，我正在重新阅读我的代码，看看是否能找到问题的根源