Question

javascriptを使用して要素の値を変更しようとすると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を吐き出す方法

お知らせフォント？これをどうすれば解決できますか？

Answer 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"はそれに割り当てられたものを文字列として扱います。ボタンとしてスタイルのdivを使用して、単純に例えば、<>タグ、<ボタン>タグ、または - 代わり<入力>フィールドの

、あなたはにHTMLを添付することができます要素を使用する必要があります。これにより、 "value"を使わなくてもHTMLを渡すことができます。

Answer 2

ではなく<input>の<button>タグを使用し、あなたがinnerHTMLプロパティでコンテンツを更新し、代わりに入力ボタンのボタンを使用する必要があります document.getElementById("dicebutton").innerHTML

Answer 3

に document.getElementById("dicebutton").value を変更します。

例：

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>