Soy bastante nuevo en desarrollo web, por lo que actualmente estoy trabajando en un proyecto para obtener más información sobre JS. Estoy tratando de agregar una función de alternar en un icono de altavoz, ya que quiero que cambie/cambie su src de su estado normal al estado silenciado (cambie la imagen src).
Sé cómo hacer que cambie una vez, pero no puedo volver a cambiarlo a su estado original.
El código se parece a esto:
<div class="tooltip" id="speakerbtn"><img src="images/images/speaker-icon.png" class="header-nav-button" id="myImage"> <span class="tooltiptext">Sound</span> </div> let image = document.getElementById('myImage'); image.addEventListener('click', function(){ changeImage(); }); function changeImage(){ image.src = 'images/images/volume-mute-icons.png'; }Puedes hacerlo fácilmente con el operador ternario
Si la imagen src es igual a la bandera isMuted , entonces muestre el muteIcon de lo contrario, muestre el voiceIcon , en cada alternancia invierta el valor de isMuted .
const muteIcon = 'images/images/volume-mute-icons.png' const voiceIcon = 'set/icon/path/here' let isMuted = false function changeImage() { isMuted = !isMuted image.src = (isMuted ? muteIcon : voiceIcon); }Tu código está funcionando bien. Ahora dale la condición If a tu función.
por ejemplo.
function changeImage(){ if image.src === 'images/images/volume-mute-icons.png' image.src = 'images/images/speaker-icon.png' else image.src = 'images/images/volume-mute-icons.png'; }luego verifica su imagen, si es una imagen muda, cambia a altavoz, si es una imagen de altavoz, cambia a silencio
¡feliz codificación!