Javascript onClick function not giving desired output value

Question

hi i have used a loop to go through an array to check onclick function but when I am clicking on any of the array elements i get the same result which should only be the result of first element. when i click on dot 3 i get the first dot active only. and if i click on any dot i get on the first dot as active i.e. index 0 is only active. please help.

var s=0;
var images = ["url(/IMAGES/main.jpg)","url(/IMAGES/main1.jpg)","url(/IMAGES/main2.jpg)"];
var image = document.getElementById("images-container");
var dots = document.getElementsByClassName("dot");
var next = document.getElementById("nextbtn");
var prev = document.getElementById("prevbtn");
for (var i = 0; i < dots.length; i++) {dots[i].onclick = function() {showSlides(i)}}
next.onclick = function() {plusSlides(1)}
prev.onclick = function() {plusSlides(-1)}
function plusSlides(n) {if (s == 0 && n == -1) {s = images.length - 1} else s += n; showSlides(s);}    
function showSlides(n) {
if (n == images.length) {s = 0}    
for (var i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
}
image.style.backgroundImage = images[s];  
dots[s].className += " active";
}

body {
  background-color: grey;
}
images-container {
    display: block;
    position: absolute;
    width: 50px;
    height: 400px;
    border: 2px solid black;
    background-image: url(/IMAGES/main2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.prev, .next {
    display: flex;
    position: relative;
    z-index: 1;
    top: 80%;
    cursor: pointer;
    padding: 16px 16px;
    color: white;
    font-weight: bold;
    font-size: 140%;
    user-select: none;
}
.prev {
    float: left !important;
    left: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    float: right !important;
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(255,255,255,0.4);
}
.dot {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 1px 2px;
    top: 100%;
    background-color: rgba(0,0,0,.8);
    border-radius: 50%;
    transition: background-color 0.6s ease;
}
.active {
    background-color: rgba(255,255,255);
} 
.dot:hover {
    background-color: #717171;
}

<html>
<body>
<div id="images-container" class="images-container">
    <p>hey i am the image container.</p>
   <div class="prevnext-container">
      <a id="prevbtn" class="prev">&#10094;</a>
      <a id="nextbtn" class="next">&#10095;</a>
   </div>                            
   <div class="dot-container">
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
   </div>
   <script type="text/javascript" src="my.js"></script>
</div>
</body>
</html>

change "var" to "let" in your loop, like this: for (let i = 0; ... — n--
– n--, Commented Mar 7, 2021 at 20:19
@syduki thanks for your sugestion. I tried it but no difference in result — Sujeet Yadav
– Sujeet Yadav, Commented Mar 7, 2021 at 20:22
i see, change also this: if (n == images.length) {s = 0} else { s = n } — n--
– n--, Commented Mar 7, 2021 at 20:30
thankyou @syduki. i was taking n as a parameter and using "s" for displaying the result. but there was only a partial relation between n and s. — Sujeet Yadav
– Sujeet Yadav, Commented Mar 7, 2021 at 20:57

cseitz · Accepted Answer · 2021-03-07 20:40:52Z

You needed to use let in the first for loop.
You were not properly setting s based on n.

The following code works and should do what you need.

var s = 0;
var images = ["url(/IMAGES/main.jpg)", "url(/IMAGES/main1.jpg)", "url(/IMAGES/main2.jpg)"];
var image = document.getElementById("images-container");
var dots = document.getElementsByClassName("dot");
var next = document.getElementById("nextbtn");
var prev = document.getElementById("prevbtn");
for (let i = 0; i < dots.length; i++) {
  dots[i].onclick = function() {
    showSlides(i)
  }
}
next.onclick = function() {
  plusSlides(1)
}
prev.onclick = function() {
  plusSlides(-1)
}

function plusSlides(n) {
  if (s == 0 && n == -1) {
    s = images.length - 1
  } else s += n;
  showSlides(s);
}

function showSlides(n) {
  if (n == images.length) {
    n = 0;
  }
  s = n;
  for (var i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  image.style.backgroundImage = images[s];
  dots[s].className += " active";
}
showSlides(0); // show first slide by default

body {
  background-color: grey;
}
images-container {
    display: block;
    position: absolute;
    width: 50px;
    height: 400px;
    border: 2px solid black;
    background-image: url(/IMAGES/main2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.prev, .next {
    display: flex;
    position: relative;
    z-index: 1;
    top: 80%;
    cursor: pointer;
    padding: 16px 16px;
    color: white;
    font-weight: bold;
    font-size: 140%;
    user-select: none;
}
.prev {
    float: left !important;
    left: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    float: right !important;
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(255,255,255,0.4);
}
.dot {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 1px 2px;
    top: 100%;
    background-color: rgba(0,0,0,.8);
    border-radius: 50%;
    transition: background-color 0.6s ease;
}
.active {
    background-color: rgba(255,255,255);
} 
.dot:hover {
    background-color: #717171;
}

<html>
<body>
<div id="images-container" class="images-container">
    <p>hey i am the image container.</p>
   <div class="prevnext-container">
      <a id="prevbtn" class="prev">&#10094;</a>
      <a id="nextbtn" class="next">&#10095;</a>
   </div>                            
   <div class="dot-container">
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
   </div>
   <script type="text/javascript" src="my.js"></script>
</div>
</body>
</html>

Collectives™ on Stack Overflow

Javascript onClick function not giving desired output value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related