老師 出現bug，第三屏開始跑不出來~

老師 出現bug，第三屏開始跑不出來~

Uncaught TypeError: Cannot read property 'getAttribute' of null

    at palyScreenAnimateDone (index.js:102)

    at window.onscroll (index.js:149)

palyScreenAnimateDone @ index.js:102

window.onscroll @ index.js:149

bug訊息如上，代碼很多，老師未來要問代碼那麼多的問題怎麼傳代碼我們彼此會比較方便呢?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>慕課網廣告</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/animation.css" />
  </head>
  <body>
    <header class="header header_animate_init">
      <div class="header__logo">
        <img class="header__logo-img" src="img/logo.png" />

        <div class="header__logo-word">
          H5實戰頁面
        </div>
      </div>
      <nav class="header__nav">
        <div class="header__nav-item">實戰課程</div>
        <div class="header__nav-item">商業案例</div>
        <div class="header__nav-item">課程體系</div>
        <div class="header__nav-item">集成環境</div>
        <div class="header__nav-item">雲端學習</div>
        <div class="header__nav-item header__nav-item-button">即刻學習</div>
        <div class="header__nav-tip"></div>
      </nav>
    </header>
    <div class="screen-1">
      <h1 class="screen-1__heading screen-1__heading_animate_init">實戰課程重磅上線</h1>
      <h6 class="screen-1__subheading screen-1__heading_animate_init">一鍵雲學習，你還在等待什麼?</h6>
    </div>
    <div class="screen-2">
      <h1 class="screen-2__heading screen-2__heading_animate_init">每門課都是真實商業案例</h1>
      <div class="screen-2__tip_animate_init"></div>
      <h6 class="screen-2__subheading-1 screen-2__subheading-1_animate_init">
        真實案例，真實場景，在實戰中實踐、操作、除錯
      </h6>
      <h6 class="screen-2__subheading-2 screen-2__subheading-2_animate_init">
        大牛帶你體驗BAT真實開發流程，所有開發過程一一為你呈現
      </h6>
      <div class="screen-2__img-BAT"></div>
      <div class="screen-2__img-teacher screen-2__img-teacher_animate_init"></div>
      <div class="screen-2__img-rocket screen-2__img-rocket_animate_init"></div>
    </div>
    <div class="screen-3">
      <h1 class="screen-3__heading">強大的語言課程體系支持</h1>
      <div class="screen-3__tip"></div>
      <h6 class="screen-3__subheading">
        學習環境與課程輕鬆對接，安裝、除錯、寫入、部署、運行，一站式解決<br />
        讓你體驗開發全流程。
      </h6>
      <div class="screen-3__img-flower"></div>
      <div class="screen-3__language">
        <div class="screen-3__language-item">HTML5</div>
        <div class="screen-3__language-item">PHP</div>
        <div class="screen-3__language-item">JAVA</div>
        <div class="screen-3__language-item">Python</div>
        <div class="screen-3__language-item">Node.js</div>
      </div>
    </div>
    <div class="screen-4">
      <h1 class="screen-4__heading">省去本地複雜的環境搭建</h1>
      <div class="screen-4__tip"></div>
      <h6 class="screen-4__subheading">
        你可以告別在虛擬機中除錯開發了
      </h6>
      <div class="screen-4__img">
        <div class="screen-4__img-item screen-4__img-item-1" >
          <img src="img/sc4-1.png" />
          <p>實戰課程集成開發環境</p>
        </div>
        <div class="screen-4__img-item screen-4__img-item-2">
          <img src="img/sc4-2.png" />
          <p>內置終端命令行</p>
        </div>
        <div class="screen-4__img-item screen-4__img-item-3">
          <img src="img/sc4-3.png" />
          <p>編輯你的應用程序</p>
        </div>
        <div class="screen-4__img-item screen-4__img-item-4">
          <img src="img/sc4-4.png" />
          <p>通過雲服務輸出效果</p>
        </div>
      </div>
    </div>
    <div class="screen-5">
      <h1 class="screen-5__heading">雲端學習可以這樣簡單</h1>
      <div class="screen-5__tip"></div>
      <h6 class="screen-5__subheading">
        看視頻、寫程式碼，一氣呵成，結合慕課網為你提供的雲端學習工具，所見即所得，從此學習不一樣
      </h6>
      <div class="screen-5__img"></div>
    </div>
    <div class="continue">
      <div class="continue__btn">繼續了解學習體驗</div>
    </div>
    <footer class="footer">
      <nav class="footer__nav">
        <div class="footer__nav-item">網站首頁</div>
        <div class="footer__nav-item">人才招募</div>
        <div class="footer__nav-item">聯繫我們</div>
        <div class="footer__nav-item">高校聯盟</div>
        <div class="footer__nav-item">關於我們</div>
        <div class="footer__nav-item">講師招募</div>
        <div class="footer__nav-item">意見反饋</div>
        <div class="footer__nav-item">友情鏈接</div>
      </nav>
      <div class="footer__copyright">
        Copyright &copy; 2015 All Right Reserved | 京ICP备13046642号-2
      </div>
    </footer>
    <div class="outline">
      <div class="outline-item">實</div>
      <div class="outline-item">商</div>
      <div class="outline-item">課</div>
      <div class="outline-item">集</div>
      <div class="outline-item">雲</div>

    </div>
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
}
h6 {
  font-size: 14px;
}

/* 頭部 */
.header {
  width: 100%;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  overflow: hidden;
  z-index: 1;
}
.header__logo {
  width: 200px;
  height: 60px;
  float: left;
}

.header__logo:hover {
  cursor: pointer;
  color: red;
}

.header__logo-img {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.header__logo-word {
  float: left;
  line-height: 60px;
  margin-left: 10px;
}

.header__nav {
  float: right;
  position: absolute;
  right: 0;
  top: 15px;
}
.header__nav-item {
  height: 30px;
  float: left;
  line-height: 30px;
  padding-right: 40px;
  font-size: 14px;
  cursor: pointer;
}

.header__nav-item-button {
  background: red;
  border-radius: 3px;
  padding: 0 10px;
}
.header__nav-tip {
  position: absolute;
  background: red;
  width: 56px;
  height: 2px;
  left: 0;
  bottom: 0;
  margin-bottom: -10px;
  transition: all 0.5s;
}

/* 屏1 */
.screen-1 {
  width: 100%;
  height: 640px;
  color: white;
  background: url(../img/sc1.jpg);
  background-size: cover;
  text-align: center;
  position: relative;
}
.screen-1__heading {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -128px;
}
.screen-1__subheading {
  position: absolute;
  top: 265px;
  left: 50%;
  margin-left: -81px;
}

/* 屏2 */
.screen-2 {
  width: 100%;
  height: 640px;
  background: white;
  color: black;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.screen-2__heading {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -176px;
}
.screen-2__tip {
  width: 40px;
  height: 3px;
  background: red;
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -20px;
}
.screen-2__subheading-1 {
  position: absolute;
  top: 130px;
  left: 50%;
  margin-left: -132px;
}
.screen-2__subheading-2 {
  position: absolute;
  top: 145px;
  left: 50%;
  margin-left: -161px;
  overflow: hidden;
}
.screen-2__img-BAT {
  width: 750px;
  height: 361px;
  background: url(../img/sc2.png);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -375px;
}
.screen-2__img-teacher {
  width: 275px;
  height: 380px;
  background: url(../img/sc2-1.png);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -138px;
  z-index: 2;
}
.screen-2__img-rocket {
  width: 266px;
  height: 205px;
  background: url(../img/sc2-2.png);
  position: absolute;
  bottom: 100px;
  left: 50%;
  margin-left: -80px;
}

/* 屏3 */
.screen-3 {
  width: 100%;
  height: 640px;
  background: rgb(43, 51, 59);
  background-size: cover;
  color: #fff;
  position: relative;
}
.screen-3__heading {
  position: absolute;
  top: 30%;
  left: 50%;
}
.screen-3__tip {
  width: 40px;
  height: 3px;
  background: red;
  position: absolute;
  top: 41%;
  left: 50%;
}
.screen-3__subheading {
  position: absolute;
  top: 45%;
  left: 50%;
}
.screen-3__img-flower {
  width: 640px;
  height: 640px;
  background: url(../img/sc3.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 150px;
}
.screen-3__language {
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: 100px;
  padding: 10px;
}
.screen-3__language-item {
  float: left;
  width: 75px;
  height: 75px;
  line-height: 75px;
  text-align: center;
  border: 5px solid;
  border-radius: 50%;
  margin: 0 15px;
}
.screen-3__language-item:nth-child(1) {
  color: rgba(34, 148, 255, 1);
  border-color: rgba(78, 121, 161, 0.3);
}
.screen-3__language-item:nth-child(2) {
  color: rgba(120, 114, 180, 1);
  border-color: rgba(120, 114, 180, 0.3);
}
.screen-3__language-item:nth-child(3) {
  color: rgba(255, 81, 70, 1);
  border-color: rgba(255, 81, 70, 0.3);
}
.screen-3__language-item:nth-child(4) {
  color: rgba(34, 199, 218, 1);
  border-color: rgba(34, 199, 218, 0.3);
}
.screen-3__language-item:nth-child(5) {
  color: rgba(118, 189, 86, 1);
  border-color: rgba(118, 189, 86, 0.3);
}

/* 屏4 */
.screen-4 {
  width: 100%;
  height: 640px;
  background: #fff;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.screen-4__heading {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -176px;
}
.screen-4__tip {
  width: 40px;
  height: 3px;
  background: red;
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -20px;
}
.screen-4__subheading {
  position: absolute;
  top: 130px;
  left: 50%;
  margin-left: -105px;
}

.screen-4__img {
  width: 1200px;
  position: absolute;
  bottom: 40%;
  left: 50%;
  margin-left: -600px;
}
.screen-4__img-item {
  text-align: center;
  float: left;
  margin: 0 75px;
}

.screen-4__img-item img {
  margin-bottom: 20px;
}

/* 屏5 */

.screen-5 {
  width: 100%;
  height: 640px;
  background: url(../img/sc5.jpg);
  background-size: cover;
  color: #fff;
  position: relative;
}
.screen-5__heading {
  position: absolute;
  left: 50%;
  bottom: 40%;
  margin-left: -160px;
}
.screen-5__tip {
  width: 40px;
  height: 3px;
  background: white;
  position: absolute;
  bottom: 36%;
  left: 50%;
  margin-left: -20px;
}
.screen-5__subheading {
  position: absolute;
  bottom: 30%;
  left: 50%;
  margin-left: -308px;
}
.screen-5__img {
  width: 200px;
  height: 200px;
  background: url(../img/sc5-1.png);
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -100px;
}

/* 按鈕頁 */
.continue {
  width: 100%;
  height: 200px;
  background: white;
  color: #000;
  text-align: center;
  position: relative;
}
.continue__btn {
  width: 200px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 3px;
  line-height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -101px;
  margin-top: -26px;
  cursor: pointer;
}
.continue__btn:hover {
  color: red;
}

/* 頁腳 */
.footer {
  height: 130px;
  background: #000000;
  color: white;
  position: relative;
}
.footer__nav {
  color: white;
  overflow: hidden;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -416px;
}
.footer__nav-item {
  float: left;
  margin-left: 40px;
  cursor: pointer;
}
.footer__nav-item:hover {
  color: red;
}

.footer__copyright {
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -230px;
}

/* 右下綱要 */
.outline {
  background: rgba(255, 255, 255, 1);
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px 0;
}
.outline-item {
  width: 50px;
  height: 30px;
  color: black;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.outline-item:hover {
  color: red;
}
/* 動畫 */

/* 主標與副標中間小橫條 */

.screen-2__tip,.screen-3__tip,
.screen-4__tip,.screen-5__tip{
  transition: all 1s
}

.screen-2__tip_animate_init,.screen-3__tip_animate_init,
.screen-4__tip_animate_init,.screen-5__tip_animate_init{
  opacity: 0;
}

.screen-2__tip_animate_done,.screen-3__tip_animate_done,
.screen-4__tip_animate_done,.screen-5__tip_animate_done{
  opacity: 1;
}
/* 屏1 */
.screen-1__heading {
  transition: all 1s;
}
.header,
.screen-1__subheading {
  transition: all 1s 0.5s;
}
.header_animate_init {
  transform: translate(0, -100%);
  opacity: 0;
}

.header_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}
.screen-1__heading_animate_init,
.screen-1__subheading_animate_init {
  transform: translate(0, 100%);
  opacity: 0;
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}
/* 屏2 */
.screen-2__heading {
  transition: all 1s;
}

.screen-2__img-teacher,
.screen-2__subheading-1,
.screen-2__subheading-2 {
  transition: all 1s 0.5s;
}

.screen-2__heading_animate_init,
.screen-2__subheading-1_animate_init,
.screen-2__subheading-2_animate_init {
  transform: translate(0, 100%);
  opacity: 0;
}
.screen-2__heading_animate_done,
.screen-2__subheading-1_animate_done,
.screen-2__subheading-2_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}

.screen-2__img-rocket {
  transition: all 1s 1.5s;
}
.screen-2__img-rocket_animate_init {
  transform: translate(0, 3000px);
  opacity: 0
}

.screen-2__img-rocket_animate_done {
  /* transform: translate(0, 0); */
  -webkit-animation:bounceInUp 1s 1.5s
}

.screen-2__img-teacher_animate_init {
  opacity: 0;
}
.screen-2__img-teacher_animate_animate {
  opacity: 1;
}

/* 屏3 */
.screen-3__heading {
  transition: all 1s 0.5s;
}
.screen-3__subheading {
  transition: all 1s 1s;
}

.screen-3__heading_animate_init,
.screen-3__subheading_animate_init {
  transform: translate(0, 100%);
  opacity: 0;
}
.screen-3__heading_animate_done,
.screen-3__subheading_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}

.screen-3__img-flower {
  transition: all 0.5s;
}
.screen-3__img-flower_animate_init {
  transform: scale(0, 0);
}

.screen-3__img-rocket_animate_done {
  transform: scale(100%, 100%);
}
/* 屏4 */
.screen-4__heading {
  transition: all 1s;
}
.screen-4__subheading {
  transition: all 1s 0.5s;
}

.screen-4__heading_animate_init,
.screen-4__subheading_animate_init {
  transform: translate(0, 100%);
  opacity: 0;
}
.screen-4__heading_animate_done,
.screen-4__subheading_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}

.screen-4__img-item-1,
.screen-4__img-item-2,
.screen-4__img-item-3,
.screen-4__img-item-4 {
  transition: all 1s;
}
.screen-4__img-item-1_animate_init,
.screen-4__img-item-2_animate_init,
.screen-4__img-item-3_animate_init,
.screen-4__img-item-4_animate_init {
  transform: scale(0, 0);
}

.screen-4__img-item-1_animate_done,
.screen-4__img-item-2_animate_done,
.screen-4__img-item_3_animate_done,
.screen-4__img-item_4_animate_done {
  transform: scale(100%, 100%);
}

/* 屏5 */
.screen-5__heading {
  transition: all 1s;
}
.screen-5__subheading {
  transition: all 1s 0.5s;
}

.screen-5__heading_animate_init,
.screen-5__subheading_animate_init {
  transform: translate(0, 100%);
  opacity: 0;
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done {
  transform: translate(0, 0);
  opacity: 1;
}

.screen-5__img {
  transition: all 1s;
}
.screen-5__img_animate_init {
  transform: scale(0, 0);
}

.screen-5__img_animate_done {
  transform: scale(100%, 100%);
}

/* 定義動畫 */
@keyframes pulse{
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.05);
  }
}

@-webkit-keyframes shake {
  0% {
    opacity: 0;
    transform: translate(0, 100%);
  }
  50%,
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  75% {
    opacity: 1;
    transform: translate(0, 25%);
  }
}
/* 使用動畫 語言部份 */
.screen-3__language_animate_init {
   transform:translate(0, 100%);
   opacity:0;
   /* 請問老師如何使五個語言圈一開始不要存在呢? */
}
.screen-3__language_animate_done{
  -webkit-animation: shake 2s 1.5s forwards;
}


.screen-3__language_animate_done  .screen-3__language-item {
  transform:translate(0, 0);
  opacity: 1;
  animation: pulse 1s 3.5s infinite alternate;
}

@-webkit-keyframes bounceInUp{
  0% {
    opacity: 0;
    transform:translate(0,3000px);
  }
   60% {
    opacity: 0;
    transform:translate(0,-20px);
  }
   75% {
    opacity: 1;
    transform:translate(0,10px);
  }
   90% {
    opacity: 1;
    transform:translate(0,-5px);
  }
   100% {
    opacity: 1;
    transform:translate(0,0);
  }
}

js

//獲取元素
let getElem = function (selector) {
  return document.querySelector(selector);
};
let getAllElem = function (selector) {
  return document.querySelectorAll(selector);
};

//獲取元素的樣式
let getCls = function (element) {
  return element.getAttribute("class");
};

//設置元素的樣式
let setCls = function (element, cls) {
  return element.setAttribute("class", cls);
};
//為元素添加樣式  ex  A => A_init
let addCls = function (element, cls) {
  let baseCls = getCls(element);
  if (baseCls.indexOf(cls) === -1)
    //如果還沒添加上
    setCls(element, baseCls + " " + cls); //注意空格
  return;
};
//為元素刪減樣式
let delCls = function (element, cls) {
  let baseCls = getCls(element);
  if (baseCls.indexOf(cls) > -1)
    //如果要被刪除者存在
    setCls(element, baseCls.split(cls).join(" ").replace(/\s+/g, " "));
  //将元素本来拥有的所有class类名通过split()方法把需要删除的样式删除了，得到一个新的数组， 然后再通过join(）方法将数组拼接成字符串，最后替换字符串中多余的空白字符。达到实现删除指定类名的方法
  return;
};
var screenAnimateElements = {
  ".screen-1": [".header", ".screen-1__heading", ".screen-1__subheading"],
  ".screen-2": [
    ".screen-2__heading",
    ".screen-2__subheading-1",
    ".screen-2__subheading-2",
    ".screen-2__img-teacher",
    ".screen-2__img-rocket",
    ".screen-2__tip",
  ],
  ".screen-3": [
    ".screen-3__heading",
    ".screen-3__img-flower",
    ".screen-3__subheading",
    ".screen-3__language",
    ".screen-3__tip",

  ],
  ".screen-4": [
    ".screen-4__heading",
    ".screen-4__subheading",
    ".screen-4__img-item-1",
    ".screen-4__img-item-2",
    ".screen-4__img-item-3",
    ".screen-4__img-item-4",
    ".screen-4__tip",

  ],
  ".screen-5": [
    ".screen-5__heading",
    ".screen-5__subheading",
    ".screen-5__img",
    ".screen-5__tip",

  ],
};

// 添加初始化樣式 _init
function setScreenAnimateInit(screenCls) {
  let animateElements = screenAnimateElements[screenCls]; //需要設置動畫的元素
  for (var i = 0; i < animateElements.length; i++) {
    var element = document.querySelector(animateElements[i]);
    var baseCls = element.getAttribute("class");
    element.setAttribute(
      "class",
      baseCls + " " + animateElements[i].substr(1) + "_animate_init"
    ); //substr(1) => 扣掉前面的點
  }
}

//step1_初始化設置
window.onload = function () {
  //!相等於 function onload(){...}  聲明全局函數
  // 為所有元素設置init
  for (k in screenAnimateElements) {
    if (k == '.screen-1' || k == '.screen-2')
      continue
    setScreenAnimateInit(k);
  }
  console.log("onload");
};
//step2_滾動條設置
// init -> done
function palyScreenAnimateDone(screenCls) {
  let animateElements = screenAnimateElements[screenCls];
  for (let i = 0; i < animateElements.length; i++) {
    let element = document.querySelector(animateElements[i]);
    let basecls = element.getAttribute("class");
    element.setAttribute(
      "class",
      basecls.replace("_animate_init", "_animate_done")
    );
  }
}

//  第二步附加：初始化第一屏的动画（1. skipScreenAnimateInit 2.跳过 init ）

setTimeout(function () {
  palyScreenAnimateDone(".screen-1");
}, 1000);

// 導航條移動
var navItems = getAllElem(".header__nav-item");
var outLineItems = getAllElem(".outline-item");

var switchNavItemsActive = function (idx) {
  for (var i = 0; i < navItems.length; i++) {
    console.log(navItems[i]);
    delCls(navItems[i], "header__nav-item_status_active");
    navTip.style.left = 0 + "px";
  }
  addCls(navItems[idx], "header__nav-item_status_active");
  navTip.style.left = idx * 96 + "px";

  for (var i = 0; i < outLineItems.length; i++) {
    delCls(outLineItems[i], "outline__item_status_active");
  }
  addCls(outLineItems[idx], "outline__item_status_active");
};

// 2.1 導航條樣式變動

let nav = getElem(".header__nav");

window.onscroll = function () {
  var top = document.documentElement.scrollTop;
  // 這裡用源代碼中的 var top = document.body.scrollTop; 無法取代top的值，但源代碼可以，為什麼呢?
  if (top < 640 * 1 - 60) {
    palyScreenAnimateDone(".screen-1");
    switchNavItemsActive(0);
    
  }

  if (top > 640 * 1 - 60) {
    palyScreenAnimateDone(".screen-2");
    switchNavItemsActive(1);
    // nav.style.color = "black";
  }
  if (top > 640 * 2 - 60) {
    palyScreenAnimateDone(".screen-3");
    switchNavItemsActive(2);
  }
  if (top > 640 * 3 - 60) {
    palyScreenAnimateDone(".screen-4");
    switchNavItemsActive(3);
  }
  if (top > 640 * 4 - 60) {
    palyScreenAnimateDone(".screen-5");
    switchNavItemsActive(4);
  }
  
  if (top > 50) {
    getElem('.header').style.color = "black"
  } else {
    getElem('.header').style.color = "white"
  }


};

// step3_ 導航條雙向定位
// 3-1導航條 點擊頁面跳轉
let setNavJump = function (i, lib) {
  let elem = lib[i];
  elem.onclick = function () {
    document.documentElement.scrollTop = i * 640 + 1;
  };
};

for (var i = 0; i < navItems.length; i++) {
  setNavJump(i, navItems);
}
// 3.2  大纲-点击跳转

for (var i = 0; i < outLineItems.length; i++) {
  setNavJump(i, outLineItems);
}

//滑動門
var navTip = getElem(".header__nav-tip");
var setTip = function (idx, lib) {
  lib[idx].onmouseover = function () {
    console.log(this, idx);
    navTip.style.left = idx * 96 + "px";
  };
  var currentIdx = 0;
  lib[idx].onmouseout = function () {
    console.log(currentIdx);
    for (var i = 0; i < lib.length; i++) {
      if (getCls(lib[i]).indexOf("header__nav-item_status_active") > -1) {
        currentIdx = i;
        break;
      }
    }
    navTip.style.left = currentIdx * 96 + "px";
  };
};

//滑動TIP
for (var i = 0; i < navItems.length-1; i++) {
  setTip(i, navItems);
}

//點擊回到頁首
let btn = getElem(".continu__btn");
console.log(btn)
btn.onclick = function () {
  document.documentElement.scrollTop = 0
}
weixin_慕雪0272820 2020-07-29
源自：宣传页项目   5-6 作业题
14
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕言 回答被采纳获得+3积分 2020-07-29 18:34:39

同学你好，报错信息如下：

http://img1.sycdn.imooc.com//climg/5f214fcf0978873a05690062.jpg

出现这样的报错，大多数都是元素没有获取到，知道是元素的问题，核对html和js就能找出问题。

同学可以把遇到的报错整理一下，下次再遇到类似问题，就可以快速解决啦。

祝学习愉快~

0
收起回答
好帮手慕言 2020-07-29 18:06:42

同学你好，是在第二屏里，html结构中少了一个类名，和js对应不上导致的，添加上即可，如下：

http://img1.sycdn.imooc.com//climg/5f21483709b53b1f14350284.jpg

另外：代码中还存在一个报错，报错信息如下：

http://img1.sycdn.imooc.com//climg/5f21497809f5586b08350175.jpg

原因是在获取元素时，类名写错了，少了字母e。添加上字母e就好了，如下：

http://img1.sycdn.imooc.com//climg/5f2149eb098aa37d05630094.jpg

关于同学的疑问，有两个解决方案：

1、把代码粘贴上来，回答问题的老师帮助排查。

2、项目作业是可以提交作业的，如果有疑问，可以在提交作业时，新建文档说明问题，会有批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。

祝学习愉快~

0
收起回答
  • 提问者 weixin_慕雪0272820 #1
    謝謝老師 請問你怎麼看出是少了這個類名 0.0 可以說說你的思路嗎? 我隱約看得出screen-2有點問題，但完全找不出少了tip呀。
    2020-07-29 18:18:19
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老師為什麼提交出現此錯誤
21 0 10
老師為什麼提交會出現這個問題
21 0 6
老師這是什麼錯誤?
17 0 4
老師 安裝時出現錯誤 怎麼解決
39 0 13
老師出現了這個問題
17 0 4

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师