未捕获引用错误:幻灯片未定义

Uncaught ReferenceError: slide is not defined

本文关键字：幻灯片 未定义 错误 引用      更新时间：2023-09-26

我试图让页面中的左箭头在单击时更改容器的背景色，但每当我单击它时，我都会收到错误：(index):147 Uncaught ReferenceError: slide is not defined我已经尝试了这里可用的所有解决方案，但仍然没有成功。这是jsfiddle：https://jsfiddle.net/mLr6oax0/

我会执行以下操作：

  • 使用element.style.backgroundColor而不是您想要的element.setAttribute('style', 'background-color: 'orange')
  • addEventListener与id或class的使用挂钩HTML的onclick

测试以下解决方案：

var container = document.getElementById("container");
var clickable = document.getElementById('clickable');
clickable.addEventListener('click', function () {
	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>

相关文章：