字体不使用javascript设置值

当我尝试使用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>';
}

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>';
}

函数onClick（）{
document.getElementById（“dicebutton”）.value='Rolling'；
}

按钮的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>

打赌



机会



支出：0.0000BTC

结果:

---

注意绿色按钮如何在网站顶部正确显示字体的同时吐出原始HTML？如何解决此问题？

使用element.innerHTML=content；如果要添加HTML，请使用语法。“.value”仅以字符串形式传递数据

所以

document.getElementById（“dicebutton”）.innerHTML='Rolling'；

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

您需要使用可以附加HTML的元素，而不是字段，例如标记、标记，或者简单地使用样式化的div作为按钮。这将允许您将HTML传递给它，而不必使用“值”。

使用

标记，而不是

并进行更改

document.getElementById（“dicebutton”）.value

到

---

document.getElementById（“dicebutton”）.innerHTML

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

例如：

Javascript:

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

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>';
}

函数onClick（）{
//你也可以选择“this.innerHTML”
document.getElementById（“dicebutton”）.innerHTML='Rolling'；
}

HTML:

掷骰子

document.getElementById（“dicebutton”）.innerHTML='Rolling'

当您使用

.innerHTML

时，它将清除该按钮中的任何内容。如果button或一个重要的类中原来有另一个元素，那么函数可以钩住它，那么现在就不存在了。顺便说一句，我假设您正在使用HTML5，因此输入没有结束标记

。一个

会是一个更好的选择（我在仔细查看之前以为您已经有了）。当我将值更改为innerHTML时，奇怪的是，当单击按钮时，该按钮根本不会更新任何文本（尽管id相同）。为您更新了我的答案