Error x[index] is undefined" in slides HTML/CSS/JS

user_15665029 0
Viewed 51

I'm new in front end development and I want some help with this error

can you please help me fix the problem im facing

var index = 1; show(index);

function move(n) { show(index = index + n); }

function show(n) { var i; var x = document.getElementsByClassName("slides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[index].style.display = "block"; }

.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}

<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
css html javascript
1 Answers

So the problem with your JS code is that you don't consider changing index based on length of the slides which are your clicks to the right and left buttons.

What I mean to say you should think what will happen when you keep clicking the right button so every time the index will increase so you need to set it back to the first image or slide in this case with this condition if (n > x.length) {index = 1}
and vice versa if (n < 1) {index = x.length} for the case when you decrease the images or slides (left button).

Here is the JS code you need to solve this problem:

var index = 1;
show(index);

function move(n) {
  show(index = index + n);
}

function show(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {index = 1}    
  if (n < 1) {index = x.length} 
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[index-1].style.display = "block";  
}

Fiddle(View):

var index = 1;
show(index);

function move(n) {
  show(index = index + n);
}

function show(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {index = 1}    
  if (n < 1) {index = x.length} 
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[index-1].style.display = "block";  
}
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>

user_151533260
Related