字体真棒不使用 javascript 设置值

Font Awesome not working with javascript set value(字体真棒不使用 javascript 设置值)

问题描述

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

Font awesome is not working for me when I try to change the value of an element using a javascript.

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 代码:

HTML code for button:

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

Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?

推荐答案

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

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

所以

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

我刚刚意识到您正在使用 <按钮的输入 > 字段.这在这种情况下不起作用.< 的唯一值可用于更改按钮文本的输入 > 字段是 value= 正如您所尝试的那样.不幸的是，值"将分配给它的任何内容都视为字符串.

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.

而不是 <输入 > 字段，您将需要使用可以附加 HTML 的元素 - 例如，<一个 > 标记，一个 <button > 标签，或者简单地使用样式化的 div 作为按钮.这将允许您将 HTML 传递给它，而无需使用值".

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".

这篇关于字体真棒不使用 javascript 设置值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！