Javascriptを使用して入れ子スパンクラスを変更する

Question

Javascriptを使用してボタン要素内に入れ子になっているときにスパンクラスを変更する際に問題が発生します。

私はこれをこのように見せようとしており、http://www.bootply.com/128062#と私はCSSが動作することを確認しました。

HTML

<button id="submitbutton" class="btn btn-primary btn-lg" type="submit" onclick="onclickFunction();"> 
    <span id ="submit_span" class=""></span> Submit</button> 

はJavaScript

function onclickFunction() { 
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning'; 
    document.getElementById('submitbutton').innerHTML = 'Loading...'; 
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 
} 

Answer 1

ボタンの.innerHTMLに書き込むときは、<span>要素を破壊しています。

代わりに、ボタンの.lastChildを選択し、（あなたはどこへ行くのテキストを望んでいたところだと仮定して）その.dataを更新します。あなただけの関数にthisを渡された場合

function onclickFunction() { 
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning'; 
    document.getElementById('submitbutton').lastChild.data = 'Loading...'; 
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 
} 

---

あなたのコードは短く、きれいになります。

function onclickFunction(btn) { 
 
    // The button element 
 
    btn.className = 'btn btn-lg btn-warning'; 
 

 
    // The last text node in the button 
 
    btn.lastChild.data = 'Loading...'; 
 

 
    // The first element (span) in the button 
 
    btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 
 
}

.btn.btn-lg.btn-warning { 
 
    background: orange 
 
} 
 

 
.glyphicon { 
 
    padding: 10px; 
 
    background: red; 
 
    }

<button onclick="onclickFunction(this);" id="submitbutton" class="btn btn-primary btn-lg" type="submit"> 
 
    <span id="submit_span" class="">x</span> Submit 
 
</button>

必要に応じて更新されている要素を調整します。正確にあなたが物事が行くことを期待しているか分からない。

Answer 2

正しい順序では、このようになります提供斜視答えは遠くありませんでしたが、正しくありませんでした

function onclickFunction() { 
    document.getElementById('submitbutton').className = 'btn btn-lg btn-warning'; 
    document.getElementById('submit_span').innerHTML = 'Loading...'; 
    document.getElementById('submit_span').className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 
} 

Answer 3

。私もそれを変更しなければなりませんでした。 前

// The first element (span) in the button 

btn.firstChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 

btn.firstElementChild.className = 'glyphicon glyphicon-refresh glyphicon-refresh-animate'; 

後、私は、DOMプロパティを調べ、要素を検査コンソールのボタンを拡張し、あなたはfirstElementChildが表示されます、クロームに行くことによってこれを見つけました。