Uncaught ReferenceError: слайд не определен

Все!Uncaught ReferenceError: слайд не определен

Сегодня я только начал писать свой первый веб-сайт, и я столкнулся с первой проблемой. Я пытаюсь заставить левую стрелку на моей странице менять цвет фона контейнера при щелчке, но всякий раз, когда я нажимаю на него, я получаю эту ошибку: (index):147 Uncaught ReferenceError: slide is not defined Я пробовал все доступные здесь решения и до сих пор не повезло. Вот jsfiddle: https://jsfiddle.net/mLr6oax0/

источник

2016-04-27 Emad Salah

Это артефакт jsfiddle. Функция не загружается в том же контексте, что и DOM. Если вы переместите весь код в файл, он работает, но для других ошибок в вашем коде (например, 'style.setAttribute') –

Я действительно работал над страницей на своем ПК. и я отправил код в jsfiddle только для вопроса. –

Я хотел бы сделать следующее:

использование element.style.backgroundColor вместо предполагаемого element.setAttribute('style', 'background-color: 'orange')
использования addEventListener с id или class крючками над onclick

Теста языка HTML ниже:

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

Спасибо большое! Попробуй, когда я дойду до своего компьютера. –

Это сработало! Большое спасибо! –

Uncaught ReferenceError: слайд не определен

ответ

Смежные вопросы