[编辑]我正在阅读这本Web设计蓝图书，但是代码的Javascript部分似乎没有执行.. chrome上的DevTools说：
index.html：332 Uncaught TypeError：无法设置属性＆＃39; onload＆＃39;未定义的 在index.html：332
我已经编辑了之前指出的错误，谢谢。
<html>
<header>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</header>
<body>
<style>
.blue {
color: #85C4ED;
}
.green {
color:green;
}
.white {
color:white;
}
.yellow {
color:yellow;
}
.grey-1 {
color:#222222;
}
.grey-2 {
color:#666;
}
.silver {
color:silver;
}
.left {
float:left;
}
.right {
float:right;
}
.black {
background-color: #000000;
}
.color-0 {
background-color: #85C4ED;
}
.color-1 {
background-color: #58ADE3;
}
.color-2 {
background-color: #3499DB;
}
.color-3 {
background-color: #0F85D1;
}
.color-4 {
background-color: #0665A2;
}
.wet-asphalt {
background-color:#34495e;
}
#sky{
overflow:hidden;
}
#sun{
position:fixed;
top:100px;
left:100px;
font-size:5px;
}
#sun > i {
font-size:12em;
}
#sun > :first-child{
position:relative;
left: 57px;
font-size:13em;
}
#sun > :last-child{
position:relative;
left: -60px;
top:2px;
font-size:14em;
}
#rocket > span{
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
position: fixed;
left: 40%;
}
#rocket > span > i:first-child{
position: fixed;
bottom: 3%;
left: 40%;
text-shadow: 1px 1px #666;
}
#rocket > span > i:nth-child(2) {
position: fixed;
bottom: 3.2%;
left: 39.8%;
background-color: #333;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.8)
–1px 1px 3px;
}
.fa-fire {
position: fixed;
bottom: 12px;
left: 12px;
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -30px 35px #ec760c,
-20px -40px 40px #cd4606,
0 -50px 65px #973716,
10px -70px 70px #451b0e;
}
.fa-plane{
-ms-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
transform: rotate(330deg);
background-color: #999;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.8)
-1px 1px 3px;
}
#earth {
float:left;
font-size: 1000vw;
width: 100%;
height: 100%;
position: fixed;
bottom: 0px;
}
.fa-globe {
position: relative;
float:left;
bottom: 423px;
right: 350%;
}
.fa-globe.land::after {
position: absolute;
content: '';
background: green;
z-index: -1;
top: 10%;
left: 0%;
width: 100%;
height: 80%;
border-radius:50%;
}
#ground {
width: 100%;
border-bottom: 60px solid brown;
}
#ground > div {
width: 50%;
height: 0px;
}
#ground .left I {
font-size:8vw;
}
#ground .right i {
float: left;
}
#ground > .right > :first-child {
left:-20px;
bottom: 15px;
}
#ground .right .small {
font-size: 12vw;
}
#ground .right .large {
font-size: 14vw;
}
.curve {
border-top-right-radius: 90% 40%;
}
.curve2 {
border-top-right-radius: 80% 10%;
}
</style>
<main class="black">
<!--000000000000000000000000000000000000000000000000000-->
<section id="space">
<div id="p0" class="row">
<i class="yellow fas fa-moon fa-7x"></i>
</i>
</div>
<div id="p1" class="row">
<div id="stars">
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
<i class="fa fa-star yellow"></i>
</div>
</div>
</section>
<!--111111111111111111111111111111111111111111111111-->
<section id="stratosphere" class="wet-asphalt curve2">
<div id="p2" class="row wet-asphalt curve"></div>
<div id="p3" class="row color-4 curve"></div>
<div id="p4" class="row color-3"></div>
<div id="p5" class="row color-2"></div>
<div id="p6" class="row color-1"></div>
</section>
<!--22222222222222222222222222222222222222222222222222222-->
<section id="sky" class="color-1">
<div id="p7" class="row color-0">
<div class="clouds">
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
</div>
</div>
<div id="p8" class="row color-0">
<div class="clouds">
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-6x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-1x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
</div>
</div>
<div id="p9" class="row color-0">
<div class="clouds">
<i class="fa fa-plane fa-5x silver"></i>
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-twitter fa-3x"></i>
</div>
</div>
<div id="p10" class="row color-0">
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-6x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-2x white"></i>
<i class="fa fa-cloud fa-1x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-3x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-4x white"></i>
<i class="fa fa-cloud fa-5x white"></i>
</div>
<div id="p11" class="row color-0"></div>
<div id="p12" class="row color-0"></div>
<div id="p13" class="row color-0"></div>
</section>
<!--33333333333333333333333333333333333333333333333333333333-->
<section id="objects">
<div id="sun">
<i class="far fa-smile green"></i>
<i class="fa fa-circle yellow"></i>
<i class="far fa-sun yellow"></i>
</div>
<div id="earth">
<i class="fa fa-globe blue land air"></i>
</div>
<div id="rocket">
<span>
<i class="fa fa-rocket fa-5x grey-2"></i>
<i class="fa fa-rocket fa-5x silver"></i>
<i class="fa fa-fire yellow"></i>
</span>
</div>
</section>
<!--444444444444444444444444444444444444444444444444444444444-->
<section id="terra">
<div id="ground">
<div class="left green">
<i class="fa fa-tree"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-tree"></i>
</div>
<div class="right">
<i class="fa fa-truck silver"></i>
<i class="fa fa-building small grey-1"></i>
<i class="fa fa-building small grey-2"></i>
<i class="fa fa-building large grey-2"></i>
<i class="fa fa-industry large grey-1"></i>
</div>
</div>
</section>
</main>
<script ="text/javascript">
document.window.onload = function() {
for ( i = 0; i < document.getElementsByClassName("row").length; i++) {
document.getElementsByClassName("row")[i].style.height = window.innerHeight + "px";
}
}
function spreadObjects(x, vm, hm, va, ha, p, e){
for (var i = 0; i < x.length; i++){
x[i].style.position = p;
x[i].style.top = Math.floor((Math.random()*vm)+va)+e;
x[i].style.left = Math.floor((Math.random()*hm)+ha)+e;
}
}
spreadObjects(document.getElementById("stars").getElementsByTagName("i"), 150, 100, 1, 1, "fixed", "%");
spreadObjects(document.getElementById("ground").getElementsByClassName("fa-tree"), 0, 14, -(window.innerHeight/28), 1, "relative", "px");
spreadObjects(document.getElementById("ground").getElementsByClassName("right")[0].getElementsByClassName("small"), 0, 14,-(window.innerHeight/13), 1, "relative", "px");
spreadObjects(document.getElementById("ground").getElementsByClassName("right")[0].getElementsByClassName("large"), 0, 14,-(window.innerHeight/15), 1, "relative", "px");
for
(var i = 0; i < document.getElementsByClassName("clouds").length; i++)
{
spreadObjects(document.getElementsByClassName("clouds")[i].getElementsByTagName("i"), window.innerHeight*.75, window.innerWidth*.75, 1, 1-(window.innerWidth/2), "relative", "px");
}
</script>
</body>
</html>
答案 0 :(得分：1)
在您的网站＆＃39; agwebdesign.net＆＃39; 上，您的HTML中似乎没有包含Id ＆＃39; body＆＃39; 的元素文件。因此给出错误。
此外，您还需要检查循环变量的区分大小写，否则可能最终会产生无限循环，使您的网站无法响应