Intenté otras preguntas similares a la mía y traté de hacer que esto funcione de todas las formas posibles, incluso simplificándolo a una iteración básica. Por alguna razón, se trata de verificar si la URL de fondo es la misma que descarta todo. Entonces, simplemente explicado, tengo un problema al formatear correctamente la condición de JavaScript. Tiene que ser el problema y, a través de mi búsqueda, no tengo idea de cómo exponerlo. Lo he probado con y sin el single ' en ambos extremos. Lo he intentado solo con el innnerHTML. Por alguna razón, es constantemente falso. Cualquier ayuda sería apreciada.
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>Necesita el valor calculado ya que no está configurado en línea
Además, las comillas deben ser las mismas o debe extraer la imagen de la cadena CSS
Todavía hay un problema con su cálculo cuando hacemos clic 4 veces. No recomiendo actualizar el contador de bucle dentro de un bucle.
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>solucionó el problema usando javascript para hacer el contador 1 y lo separó del total y luego usó eso para ayudar a contar las iteraciones.
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>