我的JS在codepen中不能工作,但在控制台中却能正常工作。

问题描述 投票:1回答:2

https:/codepen.iosristi27penmdejzrv这是我的codepen文件的链接,我也添加了jQuery,但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";
}
javascript html css web-deployment codepen
2个回答
1
投票

你有一个错别字:querySelectorALL应该是querySelectorAll。


0
投票

我们需要删除 dotgetElementsByClassName 功能,我们开始了。

这里是它的链接。

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>

      
© www.soinside.com 2019 - 2024. All rights reserved.