Question

https://codepen.io/sristi27/pen/mdejzrv 这是我的代码笔文件的链接。我还向其中添加了jQuery，但实时视图中未显示JS部分。我的代码有什么问题？ js文件：

var square=document.querySelectorALL(".squares");
var colors=["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 0, 255)","rgb(0, 255, 0)","rgb(255, 0, 255)","rgb(0, 255, 255)"];

for(var i=0;i<square.length;i++){
    square[i].style.backgroundColor = "blue";
}

Answer 1

您有错字：querySelectorALL应该是querySelectorAll

Answer 2

我们需要从dot函数中删除getElementsByClassName，然后开始。

这是它的链接。

var square=document.getElementsByClassName("squares");
var colors=["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 0, 255)","rgb(0, 255, 0)","rgb(255, 0, 255)","rgb(0, 255, 255)"];

for(var i=0;i<square.length;i++){
    square[i].style.backgroundColor = "blue";
}

body{
  background-color:grey;
  text-align:center;
}

.squares{
  width:30%;
  background:purple;
  float:left;
  padding-bottom:30%;
  margin:1.66%;
  
}
#container{
  margin:0 auto;
  max-width:600px;
}

<html>
  <head><title>color grading</title>
  </head>
  <body>
    <h1>The Great RGB Game</h1>
    <div id="container">
      <div class="squares"></div>
      <div class="squares"></div>
      <div class="squares"></div>
      <div class="squares"></div>
      <div class="squares"></div>
      <div class="squares"></div>
    </div>
  </body>
</html>

我的JS无法在Codepen中工作，但在控制台中可以正常工作

2 个答案: