字体真棒不使用 javascript 设置值答案

【问题标题】：Font Awesome not working with javascript set value字体真棒不使用 javascript 设置值
【发布时间】：2017-06-02 19:16:22
【问题描述】：

当我尝试使用 javascript 更改元素的值时，Font Awesome 对我不起作用。

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？我该如何解决这个问题？

【问题讨论】：

document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
当您使用.innerHTML 时，它会清除该按钮中的任何内容。如果该按钮或一个重要的类中最初有另一个元素，那么可以挂钩的函数现在已经消失了。顺便说一句，我假设您正在使用 HTML5，因此输入没有结束标记 </input>。 <button> 会是一个更好的选择（在我仔细查看之前，我以为你有。）

标签： javascript html frontend font-awesome

【解决方案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>';

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

你需要使用一个可以附加 HTML 的元素，而不是一个字段——例如，一个标签、一个

【讨论】：

当我将值更改为 innerHTML 时，奇怪的是，按钮在单击时根本不会更新任何文本（虽然 id 是相同的）。
为你更新了我的答案

【解决方案2】：

使用<button> 标签而不是<input> 并更改 document.getElementById("dicebutton").value 到 document.getElementById("dicebutton").innerHTML

【讨论】：

【解决方案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>

【讨论】：