Question

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

Answer 1

我会做以下事情：

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

测试以下解决方案：

＆＃13;

var container = document.getElementById("container");
var clickable = document.getElementById('clickable');

clickable.addEventListener('click', function () {
	container.style.backgroundColor = 'orange';
});

＆＃13;

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;
}

＆＃13;

    <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>

＆＃13;

未捕获的ReferenceError：未定义幻灯片

1 个答案: