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 设置值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:字体真棒不使用 javascript 设置值


- Flexslider 箭头未正确显示 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 失败的 Canvas 360 jquery 插件 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01