如何在Javascript中访问十五个益智游戏的HTML div？

我一直在做这个任务，到目前为止，我的代码还没有成功运行。我必须从已经存在的HTML文件访问这些div：

<div id="puzzlearea">
            <!-- the following are the actual fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

这是我目前的代码迭代，到目前为止，我还无法开始工作：

"use strict";

var ROWS = 4;
var emptyRow = 3;
var emptyCol = 3;
var SQSIZE = 100;

function pageLoad() {
    createPuzzle();
    document.getElementById("shufflebutton").onclick = shufflePuzzle;
}

window.onLoad = pageLoad;

function createPuzzle() {
    for (var i = 1; i < 16; i++) {
        var square = $$("puzzlearea div")[i];
        var row = Math.floor(i / ROWS);
        var col = Math.floor(i - row / ROWS);
        square.id = "square_" + row + "_" + col;
        square.className = "puzzlepiece";
        square.style.top = (col * SQSIZE) + "px";
        square.style.left = (row * SQSIZE) + "px";
        square.style.backgroundPosition = (-col * SQSIZE) + "px" + (-row * SQSIZE) + "px";
    }
}

“严格使用”；
var行=4；
var emptyRow=3；
var emptyCol=3；
变量SQSIZE=100；
函数pageLoad（）{
createPuzzle（）；
document.getElementById（“shufflebutton”）.onclick=shufflePuzzle；
}
window.onLoad=页面加载；
函数createPuzzle（）{
对于（变量i=1；i<16；i++）{
var square=$$（“面积分割”）[i]；
变量行=数学楼层（i/行）；
var col=数学楼层（i-行/行）；
square.id=“square”+行+“+列；
square.className=“拼图块”；
square.style.top=（列*SQSIZE）+“px”；
square.style.left=（行*SQSIZE）+“px”；
square.style.backgroundPosition=（-col*SQSIZE）+“px”+（-row*SQSIZE）+“px”；
}
}

如果您能帮助正确显示拼图，我们将不胜感激。作业指导还建议我不要使用2D阵列，因此为了满足要求，我避开了2D阵列。顶部的变量声明直接基于赋值指令

---

我也不能对现有的HTML文档进行任何更改。

我不会为您做家庭作业，但如果您希望在正确的方向上轻推

您应该查看childNodes，您可以在这里阅读

另一个好主意可能是阅读或甚至阅读

---

祝你任务顺利

我不会帮你做家庭作业，但如果你想朝正确的方向轻推

您应该查看childNodes，您可以在这里阅读

另一个好主意可能是阅读或甚至阅读

---

祝你任务顺利

我不太清楚是什么

“我必须从已经存在的HTML访问这些div”的意思是

你试过什么

您可以附加一个数据属性并引用它。 您可以使用jQuery nth类型的库作为目标。例如

var seconddiv = jQuery('#puzzlearea div:nth-child(2)');

或javascript

var myPuzzle = document.getElementById('puzzlearea');
var myPuzzleItems = myPuzzle.getElementsByTagName('div');

for (i = 0; i < myPuzzleItems.length; ++i) {
  // logic for doing something with the elements 
} 

var myPuzzle=document.getElementById（'puzzArea'）；
var mypuzzitems=myPuzzle.getElementsByTagName（'div'）；
对于（i=0；i

我不太清楚是什么

“我必须从已经存在的HTML访问这些div”的意思是

你试过什么

您可以附加一个数据属性并引用它。 您可以使用jQuery nth类型的库作为目标。例如

var seconddiv = jQuery('#puzzlearea div:nth-child(2)');

或javascript

var myPuzzle = document.getElementById('puzzlearea');
var myPuzzleItems = myPuzzle.getElementsByTagName('div');

for (i = 0; i < myPuzzleItems.length; ++i) {
  // logic for doing something with the elements 
} 

var myPuzzle=document.getElementById（'puzzArea'）；
var mypuzzitems=myPuzzle.getElementsByTagName（'div'）；
对于（i=0；i

如果我理解正确，问题是如何在n（=4）列中排列一组

div

元素

“严格使用”；
var-COLS=4；
var emptyRow=3；
var emptyCol=3；
变量SQSIZE=100；
函数pageLoad（）{
createPuzzle（）；
//document.getElementById（“shufflebutton”）.onclick=shufflePuzzle；
}
window.onload=页面加载；
函数createPuzzle（）{
var puzArea=document.getElementById（“拼图区域”）；
puzArea.style.position=“相对”；
var numSquares=puzArea.children.length；
对于（变量i=0；i

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

如果我理解正确，问题是如何在n（=4）列中排列一组

div

元素

“严格使用”；
var-COLS=4；
var emptyRow=3；
var emptyCol=3；
变量SQSIZE=100；
函数pageLoad（）{
createPuzzle（）；
//document.getElementById（“shufflebutton”）.onclick=shufflePuzzle；
}
window.onload=页面加载；
函数createPuzzle（）{
var puzArea=document.getElementById（“拼图区域”）；
puzArea.style.position=“相对”；
var numSquares=puzArea.children.length；
对于（变量i=0；i

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

以下是CSS唯一的答案：

<div id="puzzlearea">
  <!-- the following are the actual fifteen puzzle pieces -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

---

以下是CSS唯一的答案：

<div id="puzzlearea">
  <!-- the following are the actual fifteen puzzle pieces -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

---

你为什么不使用css呢？还有，

$$

是怎么回事？我有一个CSS文件，但我没有包括它，因为这不是我遇到问题的地方。另外，我还以为$$是用来获取的，就像文档一样。getElementById（）？不，

$

只是javascript中的一个普通变量名（就像代码中的

行

）。如果使用jquery库，则将

$

分配给jquery函数。如果您不打算使用jQuery，那么您可以使用

document.getElementById

来选择

拼图区域

元素。为什么不使用css呢？还有，

$$

是怎么回事？我有一个CSS文件，但我没有包括它，因为这不是我遇到问题的地方。另外，我还以为$$是用来获取的，就像文档一样。getElementById（）？不，

$

只是javascript中的一个普通变量名（就像代码中的

行

）。如果使用jquery库，则将

$

分配给jquery函数。如果您不打算使用jQuery，那么可以使用

document.getElementById