字体真棒不工作的JavaScript设置值

-1

字体真棒不工作，当我尝试改变使用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代码：

<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，而该网站的顶部正确显示字体？我怎样才能解决这个问题？

来源

2017-06-02 JavaC3code

'的document.getElementById（ “dicebutton”）的innerHTML ='滚动轴承';' –

当您使用'.innerHTML'时，它会清理出该按钮中的任何内容。如果这个按钮里面还有另一个元素或者一个重要的类，那么函数可以挂钩的元素现在已经消失了。顺便说一句，我假设你在做HTML5，所以输入没有结束标签''。 '

使用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>';

编辑： 我才意识到你正在使用的<输入>字段中输入按钮。这在这种情况下不会起作用。输入> <输入字段的唯一值可用于更改按钮文本，值为您尝试的值。不幸的是，“价值”将分配给它的任何东西视为一个字符串。

相反的<输入>字段中，您需要使用您可以将HTML到一个元素 - 例如，一个<一>标签，<按钮>标签，或者干脆使用样式的div作为一个按钮。这将允许您将HTML传递给它，而不必使用“值”。

来源

2017-06-02 19:20:38 Korgrue

当我将值更改为innerHTML时，按钮在单击时奇怪地不会更新任何文本（尽管id相同）。 – JavaC3code

更新了我的答案 – Korgrue

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

来源

2017-06-02 19:24:31

必须使用的，而不是输入按钮按钮，然后更新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>

来源

2017-06-02 19:25:02

工作。将接受作为答案。 – JavaC3code

字体真棒不工作的JavaScript设置值

回答

相关问题