Me he quedado atascado con mi código para cambiar un logotipo al desplazarme usando Vanilla JS (sin JQuery).
Lo que obtuve de mi devtool fue este error: -
DOMException no detectada: no se pudo ejecutar 'agregar' en 'DOMTokenList': el token proporcionado ('[object HTMLImageElement]') contiene caracteres de espacio HTML, que no son válidos en tokens.at {localhost}
¿Alguien puede detectar dónde me equivoqué con mi código?
const bigLogo = `<img src="images/redsbaby.svg" alt="Logo" />`; const smallLogo = `<img src="images/r.svg" alt="Logo" />`; window.addEventListener("scroll", () => { const currentLocation = window.pageYOffset; if(currentLocation <= 0){ document.getElementsByClassName('.div-logo').innerHTML = smallLogo; } else { document.getElementsByClassName('.div-logo').innerHTML = bigLogo; } }) <html> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="div-logo flex-col justify-center items-center order-1 mx-16 mt-2 md:-mt-1 sm:-mt-0.5 xs:mx-10 xs:-mt-0.5"> <img src="images/redsbaby.svg" alt="Logo" class="big-logo md:hidden sm:hidden xs:hidden" /> <img src="images/r.svg" alt="Logo" class=" small-logo hidden md:block sm:block xs:block" /> </div> </html>Dado el código actual, hay 2 problemas.
El argumento de cadena de selector pasado al método getElementsByClassName no necesita el . antepuesto al nombre de la clase (aquí solo estamos seleccionando por clase).
La otra cosa es que este método no devolverá un solo elemento.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).
Si hay varios elementos .div-logo en la página, deberá recorrerlos para configurar el innerHtml individualmente.
const logoDivs = document.getElementsByClassName('div-logo'); for (let i = 0; i < logoDivs.length; i++;) { logoDivs[i].innerHTML = smallLogo; // or bigLogo } Si solo habrá un elemento .div-logo , solo use document.querySelector .
document.querySelector('.div-logo').innerHTML = smallLogo; // or bigLogodocument.querySelector devuelve un elemento HTML, que está tratando de agregar a la lista de clases de otro elemento. Esto no funciona ya que classList espera cadenas (clases CSS) y le estás dando elementos HTML a través bigLogo y smallLogo .