Font Awesome Not Working With Javascript Set Value

Font awesome is not working for me when I try to change the value of an element using a javascript. Javascript: function onClick() { document.getElementById('dicebutton').value

Solution 1:

Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.

So

 document.getElementById("dicebutton").innerHTML='Rolling <iclass="fa fa-refresh fa-spin fa-3x fa-fw"aria-hidden="true"></i>';

Edit: I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.

Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".

Solution 2:

Use a <button> tag instead of <input> and change document.getElementById("dicebutton").value to document.getElementById("dicebutton").innerHTML

Solution 3:

You must use button instead of input button, then update the content with innerHTML.

Example:

Javascript:

functiononClick() {
    // you can you "this.innerHTML" toodocument.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}

HTML:

<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>