Soy nuevo en stackoverflow y comencé a aprender js hace solo unas semanas, aquí está el código:
'use strict'; let a = 1; king.addEventListener('click', function(){ a++; if(a%2 == 0){ king.classList.remove(?) king.classList.add(?) } else { king.classList.remove(?) king.classList.add(?) } });a -> contador, king es un div, tengo dos fotos llamadas king0 y king1 en la carpeta pics.
Tarea = cuando se hace clic en el rey, cambia a la segunda imagen -> primera imagen y así sucesivamente
pregunta = ¿cómo pongo fotos en "?", aunque probablemente hice todo mal y tengo que empezar de nuevo
bueno, se solicitó html pero es muy básico:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>DOC</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id = "king" class = "kingcss"> //kingcss class is empty <img src= "pics/king0.png"> </div> <script src="script.js"></script> </body> </html>classList no contiene sus imágenes directamente; en cambio, es una lista de nombres de clase CSS aplicados al elemento. Puedes asociar imágenes con esas clases en CSS:
let a = 0; let king = document.querySelector('.king') king.addEventListener('click', function() { a++; if (a % 2 == 0) { king.classList.add('one') king.classList.remove('two') } else { king.classList.add('two') king.classList.remove('one') } }); .king { width: 100px; height: 100px; border: 2px solid; } .one { background-image: url('http://placekitten.com/101/101') } .two { background-image: url('//placekitten.com/100/100') } <div class="king">King</div>Sin embargo, voy a sugerir algunas simplificaciones que podría hacer a su código más allá de simplemente hacer que funcione:
a aquí para realizar un seguimiento de la imagen a la que desea cambiar a continuación. Esto no es necesario y le brinda una cosa más para realizar un seguimiento; en su lugar, sería mejor simplemente verificar el estado actual del elemento. A continuación se muestra un ejemplo con esos problemas resueltos: en lugar de probar a , prueba los contenidos de classList; y en lugar de tener múltiples clases para alternar, una de las imágenes está en el estado "predeterminado".
let king = document.querySelector('.king') king.addEventListener('click', function() { king.classList.toggle('two') }); .king { width: 100px; height: 100px; border: 2px solid; background-image: url('http://placekitten.com/101/101') } .two { background-image: url('//placekitten.com/100/100') } <div class="king">King</div>Por favor agregue su HTML. No todo está mal. Sin mirar su HTML, asumo que tiene una etiqueta de imagen diferente para king0 y king1. Si desea utilizar classList.remove() o classList.add(), debe especificar el nombre de la clase que está agregando o eliminando del nodo classList.