未捕獲ReferenceError：未定義幻燈片

大家好！未捕獲ReferenceError：未定義幻燈片

今天，我剛剛開始編寫我的第一個網站，我遇到了我的第一個問題。我試圖讓頁面中的左箭頭在點擊時改變容器的背景顏色，但是每當我點擊它時，我都會得到這個錯誤：(index):147 Uncaught ReferenceError: slide is not defined我已經嘗試過所有可用的解決方案，但仍然沒有運氣。這裏的的jsfiddle：https://jsfiddle.net/mLr6oax0/

來源

2016-04-27 Emad Salah

它的jsfiddle的神器。該函數不會與DOM相同的上下文中加載。如果你移動一個文件中的所有代碼，它可以工作，但是對於你的代碼中的其他錯誤（比如'style.setAttribute'） –

我實際上正在我的PC的頁面上工作。我只是爲了這個問題在jsfiddle中發佈了代碼。 –

我會做到以下幾點：用id或class鉤

使用element.style.backgroundColor而不是你的意圖element.setAttribute('style', 'background-color: 'orange')
使用addEventListener超過HTML的onclick

測試解決方案如下：

var container = document.getElementById("container"); 
 
var clickable = document.getElementById('clickable'); 
 

 
clickable.addEventListener('click', function() { 
 
\t container.style.backgroundColor = 'orange'; 
 
});

html, body { 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
#container { 
 
    background-color: blue; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    width: 300%; 
 
    height: 520px; 
 
    display: flex; 
 
    background-color: #ccc; 
 
} 
 

 
.flex-item { 
 
    margin-top: 10px;; 
 
    margin-right: auto; 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: #fff; 
 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
 
    list-style: none; 
 
} 
 

 
.flex-item:first-child { 
 
    position: absolute; 
 
    left: 0px; 
 
    margin-left: 15px; 
 
} 
 

 

 

 
.flex-item:nth-child(2) { 
 
    position: absolute; 
 
    left: 500px; 
 
    margin-left: 20px; 
 
} 
 

 
.flex-item:nth-child(3) { 
 
    position: absolute; 
 
    left: 1000px; 
 
    margin-left: 20px; 
 
} 
 

 
.flex-item:nth-child(4) { 
 
    position: absolute; 
 
    left: 1500px; 
 
    margin-left: 20px; 
 
} 
 

 
li { 
 
    display: flex; 
 
} 
 
.left-arrow { 
 
    position: absolute; 
 
    top: 250px; 
 
    font-size: 50px !important; 
 
} 
 

 
.right-arrow { 
 
    position: absolute; 
 
    top: 250px; 
 
    right: 0px; 
 
    font-size: 50px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
    <title>Flex</title> 
 
    <body> 
 
    <div class="wrapper"> 
 
     <ul class="container" id="container"> 
 
     <li class="flex-item"></li> 
 
     <li class="flex-item"></li> 
 
     <li class="flex-item"></li> 
 
     <li class="flex-item"></li> 
 
     </ul> 
 
     <i id='clickable' class="left-arrow fa fa-chevron-left" aria-hidden="true"></i> 
 
     <i class="right-arrow fa fa-chevron-right" aria-hidden="true"></i> 
 
    </div> 
 
    </body>

來源

2016-04-27 19:33:22 timolawl

非常感謝！一旦我到達我的個人電腦，我會嘗試它 –

它的工作！非常感謝！ –

未捕獲ReferenceError：未定義幻燈片

回答

相關問題