使用querySelector访问具有多个类的嵌套元素

Question

我使用纯JS

我有一个6个大正方形的网格，每个大正方形包含9个较小的正方形。 HTML：

<div class="container">
<div class="row r1" style="background: red">
    <div class="square o1">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o2">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o3">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
</div>
</div>

然后我运行一个滚动骰子的JS代码，根据diceroll，一定数量的内部正方形将填充文本，这些正方形将随机选择。 代码应该像这样运行： 转到第一个大广场（i = 1） - ＆gt;滚动＆＃34;骰子＆＃34; - ＆GT;对于每个numOfTerrain选择较小的正方形在＆＃34; .square o + i＆＃34;随意填写文字。

这是我当前的代码，它在最后一个循环中失败＆＃34; Uncaught TypeError：无法设置属性＆＃39; textContent＆＃39; of null＆＃34;

var dice1, dice2;
for (var i = 1; i < 7; i++) {
  dice1 = Math.floor((Math.random() * 6) + 1);
  dice2 = Math.floor((Math.random() * 6) + 1);
  var diceroll = dice1 + dice2;

  //checking number of terrains for each main square
  var numOfTerrain;
  switch (diceroll) {
    case 2:
    case 3:
      numOfTerrain = 0;
      break;
    case 4:
    case 5:
    case 9:
    case 10:
      numOfTerrain = 2;
      break;
    case 6:
    case 7:
    case 8:
      numOfTerrain = 1;
      break;
    case 11:
    case 12:
      numOfTerrain = Math.floor((Math.random() * 4));
  }

  //Randomizing the placement of terrains in squares
  var rolls = [];
  for (var j = 0; j < numOfTerrain; j++) {
    rolls[j] = Math.floor((Math.random() * 9) + 1);
    while (rolls[j] == rolls[j - 1]) {
      rolls[j] = Math.floor((Math.random() * 9) + 1);
    }
    document.querySelector('.o' + (i + 1) + ' ' + '.i' + (rolls)).textContent = "text";
  }
}

也许我试图以错误的方式访问.square oNUMBER的孩子？

Answer 1

从简短的代码看，我认为有一些错误：

1. 主循环导致i在上次运行时设置为7，导致尝试选择缺少.o7类的问题
2. document.querySelector()调用也引用rolls作为数组，而不是当前索引（更新为rolls[j]）

请参阅下面的演示。没有附带的CSS就没有意义，但是应该足以让你回到正轨;）

＆＃13;
＆＃13;
var dice1, dice2;
for (var i = 1; i < 6; i++) {
  dice1 = Math.floor((Math.random() * 6) + 1);
  dice2 = Math.floor((Math.random() * 6) + 1);
  var diceroll = dice1 + dice2;

  //checking number of terrains for each main square
  var numOfTerrain;
  switch (diceroll) {
    case 2:
    case 3:
      numOfTerrain = 0;
      break;
    case 4:
    case 5:
    case 9:
    case 10:
      numOfTerrain = 2;
      break;
    case 6:
    case 7:
    case 8:
      numOfTerrain = 1;
      break;
    case 11:
    case 12:
      numOfTerrain = Math.floor((Math.random() * 4));
  }

  //Randomizing the placement of terrains in squares
  var rolls = [];
  for (var j = 0; j < numOfTerrain; j++) {
    rolls[j] = Math.floor((Math.random() * 9) + 1);
    while (rolls[j] == rolls[j - 1]) {
      rolls[j] = Math.floor((Math.random() * 9) + 1);
    }
    document.querySelector('.o' + (i + 1) + ' ' + '.i' + rolls[j]).textContent = "text";
  }
}
＆＃13;
<div class="container">
<div class="row r1" style="background: red">
    <div class="square o1">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o2">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o3">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o4">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o5">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o6">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;