I have tried other questions similar to mine and have tried to make this work every way I can even by simplifying it down to a basic iteration. For some reason it's something about the checking if the background url is the same that throws everything off. So simply explained, I have a issue properly formating the javascript condition. It has to be the issue and through my searching I have no idea how to lay it out. I've tried with and without the single ' on both ends. I've tried with just the innnerHTML. For some reason it's just constantly false. Any help would be appreciated.
function scrolle() {
var aa = document.getElementsByClassName("rhuman");
var ab = document.getElementById("picturea");
var ac = document.getElementById("counter");
for (var i = 0; i < aa.length; i++) {
if (ab.style.backgroundImage == "url('" + aa[i].innerHTML + "')") {
i++;
ab.style.backgroundImage = "url('" + aa[i].innerHTML + "')";
ac.innerHTML = i + 1 + "/" + aa.length;
return
}
}
}#picturea {
width: 100px;
height: 100px;
background-image: url('https://i.imgur.com/8vXm05P.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}<button onclick="scrolle()">Click here</button>
<div id="counter">1/4</div>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>You need the computed value since it is not set inline
Also the quotes need to be the same or you need to extract the image from the CSS string
There is still an issue with your calculation when we click 4 times - I do not recommend to update the loop counter inside a loop
function scrolle() {
var aa = document.getElementsByClassName("rhuman");
var ab = document.getElementById("picturea");
var ac = document.getElementById("counter");
for (var i = 0; i < aa.length; i++) {
const bgImage = window.getComputedStyle(ab, null).backgroundImage;
if (bgImage == `url("${aa[i].innerHTML}")`) {
i++;
ab.style.backgroundImage = "url('" + aa[i].innerHTML + "')";
ac.innerHTML = i + 1 + "/" + aa.length;
return
}
}
}#picturea {
width: 100px;
height: 100px;
background-image: url('https://i.imgur.com/8vXm05P.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}<button onclick="scrolle()">Click here</button>
<div id="counter">1/4</div>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>fixed the issue by using javascript to make the counter 1 and seperated it from total and then using that to help count the iterations.
function scrolle() {
var aa = document.getElementsByClassName("rhuman");
var ab = document.getElementById("picturea");
var ac = document.getElementById("counter");
for (var i = 0; i < aa.length; i++) {
if (ac.innerHTML == i) {
if (i != aa.length) {
i++;
ac.innerHTML = i;
ab.style.backgroundImage = "url('" + aa[i - 1].innerHTML + "')";
return
}
}
}
i = 0;
i++;
ac.innerHTML = i;
ab.style.backgroundImage = "url('" + aa[i - 1].innerHTML + "')";
return
}#picturea {
width: 100px;
height: 100px;
background-position: center;
background-size: contain;
background-image: url('https://i.imgur.com/8vXm05P.png');
background-repeat: no-repeat;
}<button onclick="scrolle()">Click me</button>
<h1 id="counter">1</h1><h1 id="total">/4</h1>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>