誰でも！キャッチされていないReferenceError：スライドが定義されていません
今日、私は最初のウェブサイトをコーディングし始めました。私は最初の問題に遭遇しました。私はページ内の左矢印をクリックしてコンテナの背景色を変更しようとしていますが、クリックするたびにこのエラーが表示されます：(index):147 Uncaught ReferenceError: slide is not definedここではすべてのソリューションを試しましたが、まだ運がありません。 https://jsfiddle.net/mLr6oax0/が
は、私は次の操作を行います：ここにjsfiddleだHTMLのonclick
テスト上idまたはclassフックをaddEventListenerのあなたの意図element.setAttribute('style', 'background-color: 'orange')
element.style.backgroundColorは、以下の溶液：
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>ありがとう！一度私のPCに達するとそれを試してみます –
それは働いた！どうもありがとう！ –
それはjsfiddleのアーティファクトです。関数はDOMと同じコンテキストで読み込まれません。ファイル内のすべてのコードを移動すると、コード内の他のエラー（ 'style.setAttribute'など）のために動作します –
私は実際に私のPCのページで作業していました。私は質問のためだけにjsfiddleにコードを掲載しました。 –