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

我用的是纯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代码来掷骰子，根据掷骰子的不同，一定数量的内部方块将被文本填充，这些方块将被随机选择。 代码应如下运行： 转到第一个大正方形（i=1）->随机为“.square o+i”中的每个小正方形掷“骰子”->，并用文本填充

这是我当前的代码，它在最后一个循环中失败，出现“uncaughttypeerror:无法将属性'textContent'设置为null”

var dice1，dice2；
对于（变量i=1；i<7；i++）{
dice1=数学地板（（数学随机（）*6）+1）；
dice2=数学地板（（数学随机（）*6）+1）；
var diceroll=dice1+dice2；
//检查每个主广场的地形数量
无地形；
开关（掷骰子）{
案例2：
案例3：
numOfTerrain=0；
打破
案例4：
案例5：
案例9：
案例10：
numOfTerrain=2；
打破
案例6：
案例7：
案例8：
numOfTerrain=1；
打破
案例11：
案例12：
numotrain=Math.floor（（Math.random（）*4））；
}
//随机化广场中地形的放置
var rolls=[]；
对于（var j=0；j

---

也许我试图以错误的方式访问

.square onmber

的子项？

从简单的代码看，我认为有几个bug：

主循环导致上次运行时

i

设置为

7

，导致尝试选择缺少的

.o7

类时出现问题

document.querySelector（）

调用也将

rolls

作为数组引用，而不是当前索引（更新为

rolls[j]

）

请参见下面的演示。如果没有附带的CSS，可能会有点毫无意义，但希望足以让您回到正轨；）

var dice1，dice2；
对于（变量i=1；i<6；i++）{
dice1=数学地板（（数学随机（）*6）+1）；
dice2=数学地板（（数学随机（）*6）+1）；
var diceroll=dice1+dice2；
//检查每个主广场的地形数量
无地形；
开关（掷骰子）{
案例2：
案例3：
numOfTerrain=0；
打破
案例4：
案例5：
案例9：
案例10：
numOfTerrain=2；
打破
案例6：
案例7：
案例8：
numOfTerrain=1；
打破
案例11：
案例12：
numotrain=Math.floor（（Math.random（）*4））；
}
//随机化广场中地形的放置
var rolls=[]；
对于（var j=0；j

你能创建一个JSFIDLE或什么的吗？事实上这是个好主意，但明天就可以了，我会在5分钟内因为“定时维护”而失去我的互联网连接。是的，主要的问题确实是使用了“rolls”而不是“rolls[j]”。当我困倦的时候再也不会写代码了。。。非常感谢你！

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";
  }
}