Question

我目前正在进行十五难题，并尝试编写一个函数，该函数将返回持有空磁贴的html tile元素的html id。到目前为止，我只得到空结果。有人知道解决方案吗？

＆＃13;

<!DOCTYPE html>

<html lang="en">
<head>
<title> Fifteen Puzzle Part III </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="FifteenPuzzlePart3.js" type="text/javascript"></script>
<style type="text/css">

{
border	:	0;
margin	:	0;
padding	:	0;
}

body
{
font-family	:	"Times New Roman", serif;
font-size	:	16pt;
}

#page
{
background-color: black;
color			: white;
height			: 20em;
margin-left		: auto;
margin-right	: auto;
text-align		: center;
width			: 15em;
}

#puzzleTitle
{
font-size:25pt;
padding-top:10px;
padding-bottom:10px;
}

#puzzleBoard
{
height		: 75%;
margin-left	: auto;
margin-right: auto;
width		: 75%;
}

#button
{
background-color: grey;
height			: 2.2em;
margin-left		: auto;
margin-right	: auto;
width			: 8em;
}

.square
{
float			: left;
margin			: 1px;
padding-left	: 1px;
padding-bottom	: 1px;
width			: 2.5em;
}

.tile
{
background-color: red;
border			: solid white;
font-size		: 25pt;
}


.tile15
{
background-color: transparent;
border			: none;
}

.clear
{
clear: left;
clear: right;
}

</style>
</head>
<body>
<div id="page">
<div id="puzzleTitle">The Fifteen Puzzle</div>
<div id="puzzleBoard">
<div class="square">
<div class="tile" id="tile0">1</div>
</div>
<div class="square">
<div class="tile" id="tile1">2</div>
</div>
<div class="square">
<div class="tile" id="tile2">3</div>
</div>
<div class="square">
<div class="tile" id="tile3">4</div>
</div>
<div class="square">
<div class="tile" id="tile4">5</div>
</div>
<div class="square">
<div class="tile" id="tile5">6</div>
</div>
<div class="square">
<div class="tile" id="tile6">7</div>
</div>
<div class="square">
<div class="tile" id="tile7">8</div>
</div>
<div class="square">
<div class="tile" id="tile8">9</div>
</div>
<div class="square">
<div class="tile" id="tile9">10</div>
</div>
<div class="square">
<div class="tile" id="tile10">11</div>
</div>
<div class="square">
<div class="tile" id="tile11">12</div>
</div>
<div class="square">
<div class="tile" id="tile12">13</div>
</div>
<div class="square">
<div class="tile" id="tile13">14</div>
</div>
<div class="square">
<div class="tile" id="tile14">15</div>
</div>
<div class="square tile15">
<div id="emptyTile"></div>
</div>
<div class="clear"></div>
</div>
<div id="button">Click For New Puzzle</div>
</div>
</body>
</html>

＆＃13;

"use strict";


window.onload=function()
{
document.getElementById("button").onclick=scrambleTiles;
}

function getTileElement(tileNumber)
{
	var prefix;
	var result;

	prefix="tile";
	result="";

	if(document.getElementById(prefix+tileNumber)!==null)
	{
		result=document.getElementById(prefix+tileNumber);
	}

	else
	{
		result=null;
	}
	return result;

}

function swapInfo(element1, element2)
{
	var tmp;
	var tmp2;
tmp=element1.className;
element1.className=element2.className;
element2.className=tmp;

tmp2=element1.innerHTML;
element1.innerHTML=element2.innerHTML;
element2.innerHTML=tmp2;

}

function getEmptyTile()
{
	var i;
	var prefix;
	var result;

	i=0;
	prefix="tile";
	result="";

	while(i<15 && result !== null)
	{
		if(getTileElement(i).className==="square tile15")
		{
			result=result+prefix+i;
		}
			i=i+1;
	}

	return result;
}

function scrambleTiles()
{
	swapInfo(document.getElementById("emptyTile"),document.getElementById("tile"+getRandomInteger(14)));
}

function getRandomInteger(upperLimit)
{
	return Math.floor(Math.random()*(upperLimit+1));
};

＆＃13;

Answer 1

问题是

if（getTileElement（i）.className ===＆＃34; square tile15＆＃34;）

类"square tile15"是父节点，而不是当前节点。

<div class="square tile15">
    <div id="emptyTile"></div>
</div>

或在交换函数中，因为您传递 innerNodes

swapInfo(document.getElementById("emptyTile"),document.getElementById("tile"+getRandomInteger(14)));

但这有点令人困惑。

在完成代码后，我会建议在https://codereview.stackexchange.com/上发布，以获得有关优化/改进代码的输入。

我希望这会有所帮助。

十五个拼图空瓷砖

1 个答案: