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

时间:2017-06-27 22:47:36

标签: javascript html

我使用纯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的孩子?

1 个答案:

答案 0 :(得分:0)

从简短的代码看,我认为有一些错误:

  1. 主循环导致i在上次运行时设置为7,导致尝试选择缺少.o7类的问题
  2. document.querySelector()调用也引用rolls作为数组,而不是当前索引(更新为rolls[j]
  3. 请参阅下面的演示。没有附带的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;