ライフゲージを作りたい。

Question

こんばんは。

タイトルの通り以下の図のようなライフゲージを作ろうと考えているものです。
’

<div id="enemy_life">
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
                <div class="enemy_life_gauge"></div>
            </div>

このようなものに対し、removeChildを使ってライフゲージの減少を表現しようと考え、ボタンを別に作って

document.getElementById('button').addEventListener('click',function(){
                var a = document.getElementById('enemy_life');
                 a.removeChild(a.firstChild);
});

というスクリプトをつけてみたのですが、なぜか二回ボタンを押さないとゲージが減ってくれません。

一回押す→一個減るというふうに直すにはどのようにすればよろしいでしょうか？

Answer 1

firstChild を firstElementChild に変更してみてはどうでしょうか。

a.removeChild(a.firstElementChild);

Re: dialbird さん

Comments

[dialbird]

ご返答ありがとうございます！
そして返信が遅れて申し訳ありませんでした。

Elementを入れるだけでこんなにも変わるのですね。スマートに片付いて助かりました！
ありがとうございました！

Answer 2

テキストノードを消していると思います。
#enemy_life内の改行やホワイトスペースを全部消してください。

Comments

[dialbird]

ご返答ありがとうございます！
そして返信が遅れて申し訳ありませんでした。

改行やスペースがあると影響されるのですね。勉強になります。
ありがとうございました！