Changing Div content with innerHTML-CodePudding

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 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 = "&nbsp;<i hljs-string">" aria-hidden="true"></i>";
    }
    else
    {
        audio.pause();
        document.getElementById("player").title = "Toggle Play";
        document.getElementById("player").innerHTML = "&nbsp;<i hljs-string">" aria-hidden="true"></i>";
    }
}
</script>

CodePudding user response：

You should use like this-

document.getElementById("player").innerHTML = '&nbsp;<i class="fa fa-stop" aria-hidden="true"></i>';

Just replace the double quotes with single quotes.

CodePudding user response：

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 = `&nbsp;<i class="fa fa-stop" aria-hidden="true"></i>`;

or alternatively,

document.getElementById("player").innerHTML = "&nbsp;<i class=\"fa fa-stop\" aria-hidden="true"></i>";

This is true for many languages so you might want to keep this in mind.