Estoy tratando de configurar una función de javascript que tomará una imagen de flecha hacia abajo y la intercambiará con una imagen de flecha hacia arriba cuando se haga clic. Funcionó cuando la imagen tenía una identificación, pero debido a que tengo un par de elementos de menú que usan la imagen de la flecha, quería intentar que funcionara como un nombre de clase o simplemente como un nombre normal, pero no puedo hacer que la función funcione. cambiar la fuente de la imagen cuando no es una identificación. ¿Alguien puede ayudar? Aquí está mi marcado HTML actual:
<div class="header__links hide-for-mobile" > <a id="subMenu" href="#">Features <img class="downArrow" src="/assets/images/icon-arrow-down.svg"></a> <a href="#">Company</a> <a href="#">Careers</a> <a href="#">About</a> </div>Y aquí está mi JS
const subMenu = document.querySelector('#subMenu'); subMenu.addEventListener('click', function() { if(subMenu.classList.contains('subOpen')) { subMenu.classList.remove('subOpen'); document.getElementsByClassName('downArrow').src="/assets/images/icon-arrow-down.svg"; } else { subMenu.classList.add('subOpen'); document.getElementsByClassName('downArrow').src="/assets/images/icon-arrow-up.svg"; } })En este momento, dado que su marcado solo contiene un solo elemento con la clase downArrow , podría actualizar su código a:
const subMenu = document.querySelector('#subMenu'); subMenu.addEventListener('click', function() { if(subMenu.classList.contains('subOpen')) { subMenu.classList.remove('subOpen'); document.getElementsByClassName('downArrow')[0].src="/assets/images/icon-arrow-down.svg"; } else { subMenu.classList.add('subOpen'); document.getElementsByClassName('downArrow')[0].src="/assets/images/icon-arrow-up.svg"; } }) Pero una mejor manera de hacer esto sería recorrer los resultados del método getELementsByClassName . Podrías hacer eso con algo como:
const subMenu = document.querySelector('#subMenu'); subMenu.addEventListener('click', function() { if(subMenu.classList.contains('subOpen')) { subMenu.classList.remove('subOpen'); Array.from(document.getElementsByClassName("downArrow")).forEach( function(element, index, array) { element.src="/assets/images/icon-arrow-down.svg"; } ); } else { subMenu.classList.add('subOpen'); Array.from(document.getElementsByClassName("downArrow")).forEach( function(element, index, array) { element.src="/assets/images/icon-arrow-up.svg"; } ); } })