Así que tengo este sitio web configurado para que haya este botón que cambia la imagen/color de fondo. Se supone que es como un botón de modo oscuro. Estoy tratando de configurarlo para que, si se hace clic en el botón, el fondo sea oscuro y la imagen sea la versión oscura. Cuando se vuelve a hacer clic, el fondo es claro, la imagen es la versión clara. En este momento, el fondo está funcionando bien. Solo tengo problemas con la forma de organizar las imágenes correctamente. Aquí está el código.
function myFunction() { var element = document.body; element.classList.toggle("dark-mode") } function changeImage() { var image = document.getElementById('myImage'); if(image.src.match("https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4")) { image.src = "https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa"; } else { image.src = "https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa"; } } .title { font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family: arial; color: #00486B; } .img { background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block; } .body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } .dark-mode .title { color: yellow; background-color: navy; } .dark-mode .img { background-color: teal; } .main { text-align: center; font-size; 50px; border-radius: 20px; font-family: arial; color: #00486B; } <!doctype html> <html> <head> <title>Java</title> </head> <body class="main"> <h1 class="title">TOGGLE DISPLAY</h1> <img src="https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4" class="img" id="myImage"> <br> <button onclick="myFunction(); changeImage();" value="Change">CLICK</button> </body> </html>En realidad, su código funciona bien, solo carga la imagen lentamente. La razón podría ser que está usando una imagen de la unidad. Tal vez pueda simplemente cambiar la imagen o intentar usar CSS para mostrar/ocultar la imagen (también podría ser una pequeña forma de hackear)
<html> <head> <style> .title { font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family: arial; color: #00486B; } .img { background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block; } .body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } .dark-mode .title { color: yellow; background-color: navy; } .dark-mode .img { background-color: teal; } .main { text-align: center; font-size: 50px; border-radius: 20px; font-family: arial; color: #00486B; } #myImage2 { display: none; } </style> <script> function myFunction() { var element = document.body; element.classList.toggle("dark-mode") } function changeImage() { var image1 = document.getElementById('myImage1'); var image2 = document.getElementById('myImage2'); if (image1.style.display === "none") { image1.style.display = "block"; image2.style.display = "none"; } else { image1.style.display = "none"; image2.style.display = "block"; } } </script> <title>Java</title> </head> <body class="main"> <h1 class="title">TOGGLE DISPLAY</h1> <img src="https://drive.google.com/uc?export=view&id=1zv8IxOU6cHccEanlwTnFmx9HWNQR9AA4" class="img" id="myImage1"><br> <img src="https://drive.google.com/uc?export=view&id=1H8ZfWPnLQ1dgKIo7geyyzlkAeh_QHrIa" class="img" id="myImage2"><br> <button onclick="myFunction(); changeImage();" value="Change">CLICK</button> </body> </html>document.body.classList.contains('dark-mode') en su lugar.Es bastante simple alternar una imagen; lo siguiente usa una matriz de fuentes de img para proporcionar una búsqueda rápida, junto con indexOf para encontrar la posición en la matriz de la fuente de img actual.
const q=(e,n=document)=>n.querySelector(e); /* Original images were insanely large and took foreever to load so replaced with nice kittens to illustrate the point easily */ const srcs=[ 'https://placekitten.com/452/450?image=2', 'https://placekitten.com/452/450?image=1' ]; let oPromises=[]; srcs.forEach( src=>{ oPromises.push(new Promise((resolve,reject)=>{ let img=new Image(); img.onload=function(e){ resolve( this.src ) } img.src=src; }) )}); Promise.all( oPromises ) .then( values=>{ q('button').addEventListener('click',function(e){ document.body.classList.toggle("dark-mode"); let img=q('img'); img.src=values[ 1 - values.indexOf( img.src ) ]; }); }) .catch(err=>console.warn(err)) .title { font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B; } .img { background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block; } .body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } .dark-mode .title{ color:yellow; background-color: navy; } .dark-mode .img{ background-color: teal; } .main { text-align: center; font-size; 50px; border-radius: 20px; font-family: arial; color: #00486B; } <h1 class="title">TOGGLE DISPLAY</h1> <img src="https://placekitten.com/452/450?image=1" class="img" /> <button>CLICK</button>