I have been stuck with my code to change a logo on scrolling using Vanilla JS (Without JQuery).
What I got from my devtool was this error:-
Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object HTMLImageElement]') contains HTML space characters, which are not valid in tokens.at {localhost}
Can anyone spot where I went wrong with my code?
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>
Given the current code, there are 2 issues.
The selector string argument passed to the getElementsByClassName method, does not need the . prefixed to the class name (we're only selecting by class here).
The other thing is, that this method won't return a single element.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).
If there are multiple .div-logo elements on the page, you will need to loop over them to set the innerHtml individually.
const logoDivs = document.getElementsByClassName('div-logo');
for (let i = 0; i < logoDivs.length; i++;) {
logoDivs[i].innerHTML = smallLogo; // or bigLogo
}
If there will only ever be one .div-logo element, just use document.querySelector.
document.querySelector('.div-logo').innerHTML = smallLogo; // or bigLogo
document.querySelector returns an HTML element, which you're trying to add to another element's class list. This does not work since classList expects strings (CSS classes) and you're giving it HTML elements via bigLogo and smallLogo.