I've read through many other questions on this but none seem to solve my problem.
I have created a div element which houses an icon from fontawesome. It's a media player icon where i use an if/else argument to change from PLAY to PAUSE and back again. Without using the fontawesome element it works but i like the icon. I've also looked up using jquery instead but it's a little beyond my knowledge.
It's the i class="fa fa-stop" aria-hidden="true" it doesn't like.
<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>
You should use like this-
document.getElementById("player").innerHTML = ' <i class="fa fa-stop" aria-hidden="true"></i>';
Just replace the double quotes with single quotes.
You have a double qoute inside your string literals. Try using the ` for string template or escape your double qoutes using \ (the escape character). it would look something like this
document.getElementById("player").innerHTML = ` <i class="fa fa-stop" aria-hidden="true"></i>`;
or alternatively,
document.getElementById("player").innerHTML = " <i class=\"fa fa-stop\" aria-hidden="true"></i>";
This is true for many languages so you might want to keep this in mind.