开发者问题收集

Javascript.js:6 未捕获的类型错误：无法设置未定义的属性“background”

2017-06-28
948
javascript html css

我需要使用 for in 为数组 colors 中的每个 div 分配一种颜色 

var colors = ["#232323","#343434","#555555","#989889","#987898","#458676"]

var squares=document.querySelectorAll(".square")

for (i=0; i<squares.length; i++){
  squares[i].style.background=colors[i]
}
body {
  background: black;
}

.square {
  float : left;
  height: 30%;
  width:30%;
  background-color: red;
  margin : 1%;
}

.container {
  max-width: 600p1%
<iDOCTYPE>
<html>
<head>
  <title>Proyecto Color Game</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="stylesheet.css">

</head>
<body>
  <div class="container" align="center">

      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
</div>


<script src="Javascript.js" ></script>
</body>
</html>
3个回答

使用 devtools 查看您的 HTML 和样式。例如，如果您打开“元素”选项卡，点击 .container ，然后在右侧的检查器窗格中选择“计算”，您将看到以下内容：

在此处输入图像描述

高度为零。这是因为您没有为 div 提供任何会导致其高度不为零的内容。要测试这一点，只需添加一个元素样式，如 height: 500px :

enter image description here

您将看到结果：

enter image description here

样式检查器还会显示 max-width 属性中的错误（参见黄色三角形），因此您也应该修复它。

故事的寓意：Chrome 提供了很棒的工具来调试您的代码 - CSS， HTML 和 JS。学习并使用它们。 隐藏人物 中的女主角通过阅读手册学习 FORTRAN 已有 50 年，阅读文档仍然是学习新工具的最佳方式。Devtools 为其样式检查器提供了 出色的文档 。请阅读它。

您的原始错误消息

Javascript.js:6 Uncaught TypeError: Cannot set property 'background' of undefined

我对这个错误消息感到困惑。它暗示某些 DOM 元素上不存在 style 属性，但事实绝不会如此。一定有其他事情发生了。

2017-06-28

您的代码似乎是正确的，但是由于 div 为空，因此您无法获得想要的结果。尝试在每个 div 中放入一些内容，例如 &nbsp; ，然后尝试。 这里 是 jsfiddle，可向您展示我的意思。

wbadart
2017-06-28

您的代码中存在一些错误。

我已完成此代码片段。

对您的代码所做的更改：

  • 我已将 div 设置为 100x100px，以便您的 div 具有一定大小，并且您可以看到颜色。您还可以向 div 添加内容，以便它们具有一定大小。
  • 您在 .container 类的末尾缺少 }
  • 我已将 .container 类的最大宽度设置为 600px 
var colors = ["#232323","#343434","#555555","#989889","#987898","#458676"]

var squares=document.querySelectorAll(".square")

for (i=0; i<squares.length; i++){
  squares[i].style.background=colors[i];
}
body {
  background: black;
}

.square {
  float : left;
  height: 100px;
  width: 100px;
  background-color: red;
  margin : 1%;
}

.container {
  max-width: 600px;
}
<html>
<head>
  <title>Proyecto Color Game</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container" align="center">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</body>
</html>
JV Lobo
2017-06-28