He leído muchas otras preguntas sobre esto, pero ninguna parece resolver mi problema.
Creé un elemento div que alberga un ícono de fontawesome. Es un ícono de reproductor de medios donde uso un argumento if/else para cambiar de PLAY a PAUSE y viceversa. Sin usar el elemento fontawesome funciona, pero me gusta el icono. También busqué usando jquery, pero está un poco más allá de mi conocimiento.
Es el i class="fa fa-stop" aria-hidden="true" lo que no le gusta.
<script language="javascript"> function chPlay2() { if (document.getElementById("player").title =="Toggle Play") { audio.play(); document.getElementById("player").title = "Toggle Stop"; document.getElementById("player").innerHTML = " <i class="fa fa-stop" aria-hidden="true"></i>"; } else { audio.pause(); document.getElementById("player").title = "Toggle Play"; document.getElementById("player").innerHTML = " <i class="fa fa-play" aria-hidden="true"></i>"; } } </script>Deberías usar así-
document.getElementById("player").innerHTML = ' <i class="fa fa-stop" aria-hidden="true"></i>';Simplemente reemplace las comillas dobles con comillas simples.
Tienes una cita doble dentro de tus literales de cadena. Intente usar la plantilla ` for string o escape sus dobles qoutes usando \ (el carácter de escape). se vería algo como esto
document.getElementById("player").innerHTML = ` <i class="fa fa-stop" aria-hidden="true"></i>`;o alternativamente,
document.getElementById("player").innerHTML = " <i class=\"fa fa-stop\" aria-hidden="true"></i>";Esto es cierto para muchos idiomas, por lo que es posible que desee tener esto en cuenta.