Tengo una función Javascript con la que he estado lidiando durante unas horas,
JavaScript:
var musicFile = new Audio('audio/Ice.mp3'); var audioState = document.getElementById('musicIcon'); function music() { if (audioState.src = 'images/musicOff.svg') { musicFile.play(); audioState.src = 'images/musicOn.svg'; } else if(audioState.src = 'images/musicOn.svg') { musicFile.pause(); musicFile.currentTime = 0; audioState.src = 'images/musicOff.svg'; } }HTML:
<ul class="tabs" style="top: 0px; right: 0px; width: 210px; right: 10px; text-shadow: 1px 1px indigo;"> <li class="tab" onclick="music()"> <img id="musicIcon" src="images/musicOff.svg" width="32" height="32"> </li> </ul>CSS:
.tabs { position: absolute; display: flex; list-style-type: none; margin: auto; padding: 0px; width: 800px; height: 30px; } .tab { position: relative; top: 30%; width: 15%; height: 20px; background:royalblue; border: 0px transparent; border-radius: 10px; padding: 10px; margin: 0px; margin-right: 15px; text-align: center; font-size: 16px; font-family: monospace; color: white; cursor: pointer; } .tab:hover { text-align:center; background-color: #CCC; } La etiqueta <li> está destinada a actuar como un botón, y hace todo en la función (cambia el ícono .svg y reproduce la música), pero la segunda vez que hago clic en ella, no sucede nada. También revisé la consola, y no hay errores.
Realmente agradecería algo de ayuda, y tal vez algunos consejos en general. (Nuevo en Javascript, no busca usar jQuery en este momento).
Hay un par de cosas que suceden con su ejemplo:
== (comparación suelta) o triple === (comparación estricta).var audioState = document.getElementById('musicIcon'); demasiado pronto, porque el documento aún no se ha analizado por completo, por lo que audioState será null , en lugar del elemento.audioState.src devolverá el URI completo a la fuente después de que le hayas asignado un valor. Por lo tanto, compararlo con el URI relativo no coincidirá.Aquí hay un ejemplo de trabajo, poniéndolo todo junto (dejé fuera la parte del archivo de audio):
var audioState; // create absolute URIs from relative URIs of the images, resolved against document.documentURI var imageOffUri = new URL('images/musicOff.svg', document.documentURI); var imageOnUri = new URL('images/musicOn.svg', document.documentURI); function music() { if (audioState.src == imageOffUri) { audioState.src = imageOnUri; console.log('turned on'); } else if(audioState.src == imageOnUri) { audioState.src = imageOffUri; console.log('turned off'); } } // wait for the document to be fully parsed document.addEventListener('DOMContentLoaded', function() { audioState = document.getElementById('musicIcon'); }); .tabs { position: absolute; display: flex; list-style-type: none; margin: auto; padding: 0px; width: 800px; height: 30px; } .tab { position: relative; top: 30%; width: 15%; height: 20px; background:royalblue; border: 0px transparent; border-radius: 10px; padding: 10px; margin: 0px; margin-right: 15px; text-align: center; font-size: 16px; font-family: monospace; color: white; cursor: pointer; } .tab:hover { text-align:center; background-color: #CCC; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul class="tabs" style="top: 0px; right: 0px; width: 210px; right: 10px; text-shadow: 1px 1px indigo;"> <li class="tab" onclick="music()"> <img id="musicIcon" src="images/musicOff.svg" width="32" height="32"> </li> </ul> </body> </html>te estás olvidando de usar doble igual para hacer una comparación. Cambiar = a ==
audioState.src está devolviendo la ruta absoluta, intente cambiarlo por el método getAttribute('src') en todas las comparaciones. como eso:
audioState.getAttribute('src') == 'images/musicOff.svg' y para cambiar el valor src , intente usar setAttribute('attribute', 'newValue') así:
audioState.setAttribute('src', 'images/musicOff.svg');espero que te ayude