divのプロパティを動的に変更する

Question

メノラを作成して、ボタンをクリックしてキャンドルを照らし、キャンドルを5秒ごとに短くしたい（この値は変更可能です）。私はアニメーションに立ち往生しています。 divのプロパティ（高さなど）にアクセスして、キャンドルのライトを移動する必要があることを理解していますが、どうやってそれを行うことはできません。

ここに私のコードは、これまでのところです：

var lightOn = document.createElement("BUTTON"); 
 
lightOn.textContent = "Light Menorah!"; 
 
document.body.appendChild(lightOn); 
 
lightOn.onclick = setInterval (candleLight,1000); 
 
function candleLight() { 
 
    document.getElementsByClassName("candles").innerHTML = style.height-10; 
 
    }

.candles { 
 
    background-color: blue; 
 
    width: 35px; 
 
    height: 90px; 
 
    margin-right: 10px; 
 
    float: left; 
 
    } 
 
    .mainCandle { 
 
    background-color: blue; 
 
    width: 35px; 
 
    height: 120px; 
 
    margin-right: 10px; 
 
    float: left; 
 
    } 
 
    .light { 
 
    background-color: yellow; 
 
    width: 35px; 
 
    height: 40px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    } 
 
    #theLight { 
 
    } 
 
    #theCandle { 
 
    display:block; 
 
    position: relative; 
 
    padding-top: 40px; 
 
    }

<div id = "theLight"> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
</div> 
 
<div id = "theCandle"> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "mainCandle"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
</div>

Answer 1

ハッピーハヌカアリス！

getElementsByClassNameから取得したすべての要素を調べる必要があります（この関数は要素のリストを返しますので、実際には.innerHTMLを使用することはできません）。それぞれの要素の高さを変更する必要があります要素。

その他の問題は、外部CSSファイルを使用して高さを設定した場合、要素のstyle.heightを使用できないことです。 getComputedStyle機能を使用する必要があります。

すべての問題は修正されませんが、それはあなたに良いスタート（そして他のすべてを解決する一般的な方法）を与えるでしょう。

位置の問題を修正する必要があります。

var lightOn = document.createElement("BUTTON"); 
 
    lightOn.textContent = "Light Menorah!"; 
 
    document.body.appendChild(lightOn); 
 
    lightOn.onclick = function() { 
 
    setInterval (candleLight,1000); 
 
    } 
 
    function candleLight() { 
 
    Array.prototype.forEach.call(
 
    document.getElementsByClassName("candles"), function(e) { 
 
     height = window.getComputedStyle(e,null).getPropertyValue("height") 
 
     if (parseInt(height)) { 
 
     e.style.height = (parseInt(height)-10) + 'px'; 
 
     } 
 
    }) 
 
    }

.candles { 
 
    background-color: blue; 
 
    width: 35px; 
 
    height: 90px; 
 
    margin-right: 10px; 
 
    float: left; 
 
    } 
 
    .mainCandle { 
 
    background-color: blue; 
 
    width: 35px; 
 
    height: 120px; 
 
    margin-right: 10px; 
 
    float: left; 
 
    } 
 
    .light { 
 
    background-color: yellow; 
 
    width: 35px; 
 
    height: 40px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    } 
 
    #theLight { 
 
    } 
 
    #theCandle { 
 
    display:block; 
 
    position: relative; 
 
    padding-top: 40px; 
 
    }

<div id = "theLight"> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
    <div class = "light"></div> 
 
</div> 
 
<div id = "theCandle"> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "mainCandle"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
    <div class = "candles"></div> 
 
</div>

何かがまだ明らかではない場合 - お問い合わせ下さい:)

Answer 2

をここでは、ろうそくを縮小するために必要なロジックです。 setIntervalはそれを定期的に行います。

var candles = undefined; 
function candleLight() { 
    if (candles === undefined) { 
     candles = document.getElementsByClassName("candles") 
    } 

    for (var candleIndex in candles) { 
     candles[candleIndex].style.height = parseInt(candles[candleIndex].style.height.replace("px", "")) + "px"; 
    } 
} 

あなたの過ちであった：

• document.getElementsByClassNameは、要素と、自分の要素の配列を返すheightを持ってstyleメンバーを持っている、また、innerHTMLを持っていますが、配列自体は持っていません。これら
• は、あなたのheight I以来innerHTML
• にheight値を割り当てるために論理的な間違いでしたピクセルで測定した場合、確かに"px"で終わり、テキストデータです。したがって、あなたはそこから10を引くことはできません。これは私のコードの提案では、私は文字列から