Font Awesome无法使用javascript设置值

Question

当我尝试使用JavaScript更改元素的值时，真棒字体对我不起作用。

Javascript：

function onClick() {
    document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}

按钮的HTML代码：

<form>
            Bet<br>
            <input type="text" name="bet"><br>
            Chance<br>
            <input type="text" name="chance"><br>
            <h3>Payout: 0.0000BTC</h3>
            <input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
        </form>

结果：

请注意，当网站顶部正确显示字体时，绿色按钮如何吐出原始HTML？ 我怎样才能解决这个问题？

Answer 1

使用element.innerHTML = content; 语法，如果要添加HTML。 “ .value”仅将数据作为字符串传递。

所以

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

编辑：我刚刚意识到您正在为按钮使用<输入>字段。 在这种情况下，将无法正常工作。 可以用来更改按钮文本的<input>字段的唯一值是您尝试过的value =。 不幸的是，“值”将分配给它的任何内容都视为字符串。

您将需要使用可以将HTML附加到的元素，而不是<input>字段，例如，<a>标记，<<button>标记，或仅使用样式div作为按钮。 这将使您无需使用“值”即可将HTML传递给它。

Answer 2

使用<button>标记而不是<input> ，并将document.getElementById("dicebutton").value更改为document.getElementById("dicebutton").innerHTML

Answer 3

您必须使用按钮而不是输入按钮，然后使用innerHTML更新内容。

例：

Javascript：

function onClick() {
    // you can you "this.innerHTML" too
    document.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>