Quiero pasar de una imagen a otra haciendo clic en la imagen misma. ayúdame con el código (quiero la respuesta más simplificada, estudiante muy nuevo)
function changeImage(){ var img = document.createElement('img') img.src =="images/pic2.jpg" let displayImage = document.getElementById('first') if (displayImage.getAttribute("src") =="images/pic.jpg") { document.getElementById('first').appendChild(img); } }Simplemente puede cambiar el atributo src de la imagen.
function switchImage () { let element = document.getElementById("myImg") if (element.src == "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg") { element.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Aquilegia_vulgaris_100503c.jpg/420px-Aquilegia_vulgaris_100503c.jpg" } else { element.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg" } } <img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg" onclick="switchImage()" />la forma más fácil es cargar las 2 imágenes y dejar la pantalla encendida solo una a la vez
Código de muestra
const flipper = document.querySelector('#flip-2-images') flipper.onclick = e => { let isOne = flipper.classList.toggle('one') flipper.classList.toggle('two', !isOne ) } #flip-2-images { cursor : pointer; } #flip-2-images.one > img:nth-child(2), #flip-2-images.two > img:nth-child(1) { display : none; } <div id="flip-2-images" class="one"> <img src="https://picsum.photos/200/300?random=1"> <img src="https://picsum.photos/200/300?random=2"> </div>