引導傳送帶在Chrome中不工作

Question

我在我的網頁中實現了傳送帶作爲滑塊。它在firefox和移動瀏覽器（甚至是Chrome瀏覽器）中運行良好。但它沒有出現在鉻中。 我無法弄清楚什麼是錯的。我的語法是：

HTML：

<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> 
    <!-- Overlay --> 
    <div class="overlay"></div> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> 
    <li data-target="#bs-carousel" data-slide-to="1"></li> 
    <li data-target="#bs-carousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item slides active"> 
     <div class="slide-1"></div> 
     <div class="hero"> 
     <hgroup> 
      <h1>Nepal&apos;s First</h1>   
      <h3>Nepal&apos;s first portal to buy authentic and verified refurbished Auto-mobiles.</h3> 
     </hgroup> 

     </div> 
    </div> 
    <div class="item slides"> 
     <div class="slide-2"></div> 
     <div class="hero">   
     <hgroup> 
      <h1>Trusted Sellers</h1>   
      <h3>Buy from our authentic and verified recondition houses across the nation.</h3> 
     </hgroup>  

     </div> 
    </div> 
    <div class="item slides"> 
     <div class="slide-3"></div> 
     <div class="hero">   
     <hgroup> 
      <h1>Tested</h1>   
      <h3>All listed vehicles tested and in well condition.</h3> 
     </hgroup> 

     </div> 
    </div> 
    </div> 
</div> 

CSS

/* 
Fade content bs-carousel with hero headers 
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com 
Image credits: unsplash.com 
*/ 

/********************************/ 
/*  Fade Bs-carousel  */ 
/********************************/ 
.fade-carousel { 
    position: relative; 
    height: 55vh; 
} 
.fade-carousel .carousel-inner .item { 
    height: 55vh; 
} 
.fade-carousel .carousel-indicators > li { 
    margin: 0 2px; 
    background-color: #f39c12; 
    border-color: #f39c12; 
    opacity: .7; 
} 
.fade-carousel .carousel-indicators > li.active { 
    width: 10px; 
    height: 10px; 
    opacity: 1; 
} 

/********************************/ 
/*   Hero Headers  */ 
/********************************/ 
.hero { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 3; 
    color: #fff; 
    text-align: center; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 0 rgba(0,0,0,.75); 
     -webkit-transform: translate3d(-50%,-50%,0); 
     -moz-transform: translate3d(-50%,-50%,0); 
      -ms-transform: translate3d(-50%,-50%,0); 
      -o-transform: translate3d(-50%,-50%,0); 
       transform: translate3d(-50%,-50%,0); 
} 
.hero h1 { 
    font-size: 6em;  
    font-weight: bold; 
color: #d3d3d3d3; 
    margin: 0; 
    padding: 0; 
} 
.hero h3{ 
color:#cccccccc; 
} 

.fade-carousel .carousel-inner .item .hero { 
    opacity: 0; 
    -webkit-transition: 2s all ease-in-out .1s; 
     -moz-transition: 2s all ease-in-out .1s; 
     -ms-transition: 2s all ease-in-out .1s; 
     -o-transition: 2s all ease-in-out .1s; 
      transition: 2s all ease-in-out .1s; 
} 
.fade-carousel .carousel-inner .item.active .hero { 
    opacity: 1; 
    -webkit-transition: 2s all ease-in-out .1s; 
     -moz-transition: 2s all ease-in-out .1s; 
     -ms-transition: 2s all ease-in-out .1s; 
     -o-transition: 2s all ease-in-out .1s; 
      transition: 2s all ease-in-out .1s;  
} 

/********************************/ 
/*   Overlay   */ 
/********************************/ 
.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    background-color: #080d15; 
    opacity: .2; 
} 

/********************************/ 
/*   Custom Buttons  */ 
/********************************/ 
.btn.btn-lg {padding: 10px 40px;} 
.btn.btn-hero, 
.btn.btn-hero:hover, 
.btn.btn-hero:focus { 
    color: #f5f5f5; 
    background-color: #1abc9c; 
    border-color: #1abc9c; 
    outline: none; 
    margin: 20px auto; 
} 

/********************************/ 
/*  Slides backgrounds  */ 
/********************************/ 
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2, 
.fade-carousel .slides .slide-3 { 
    height: 55vh; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
.fade-carousel .slides .slide-1 { 
background-image: url(../img/homepage-slider/nepalride-banner-1.jpg);; 
} 
.fade-carousel .slides .slide-2 { 
    background-image: url(../img/homepage-slider/nepalride-banner-2.jpg);; 
} 
.fade-carousel .slides .slide-3 { 
background-image: url(../img/homepage-slider/nepalride-banner-3.jpg);; 
} 

/********************************/ 
/*   Media Queries  */ 
/********************************/ 
@media screen and (min-width: 980px){ 
    .hero { width: 980px; }  
} 
@media screen and (max-width: 640px){ 
    .hero h1 { font-size: 4em; }  
} 

誰能告訴我該怎麼辦？我在控制檯以下錯誤：

Uncaught TypeError: Cannot read property 'getContext' of null 
    at frontend.js:30 

您可以在nepalride.com

Answer 1

詳情請參閱DOM有id爲cline沒有元素。你可以避免這個錯誤，如果陳述

if ($('#cline').length > 0) { 
    var cline = document.getElementById("cline").getContext("2d"); 
    new Chart(cline).Line(lineChartData, { 
     responsive: true 
    }); 
} 

祝你好運。 C