I need to change an anchor tag from this
<a href="#" id="masini">Mașini <i class="bi bi-caret-right"></i></a>
to this
<a href="#" id="masini">Mașini <i class="bi bi-caret-down"></i></a>
when the screen gets smaller. Basically to be responsive. I need to use javascript btw.
I tried the code bellow but it's not working.
if(window.innerWidth < 1130px)
{
var replace = "Mașini"
replace += "<i class="bi bi-caret-down"></i>";
document.getElementById("masini").innerHTML = replace;
}
I'd recommend targeting the <i> element and changing it's class:
if (window.innerWidth < 1130) {
const iElement = document.querySelector("#masini i");
iElement.classList.replace("bi-caret-right", "bi-caret-down");
}
It would help to do the following:
if (window.innerWidth < 1130) {
document.getElementById("masini").className = "bi bi-caret-down";
}<a href="#">Mașini <i id="masini" class="bi bi-caret-right"></i></a>You need to delimit your double quotes or wrap with single quotes.
replace += '<i class="bi bi-caret-down"></i>';
OR:
replace += "<i class=\"bi bi-caret-down\"></i>";