Change div's properties dynamically

Question

So I want to create a Menorah and I want to light the candles by clicking the button and let the candle become shorter by, let's say, every second by 5px (for sure this value can be changed). I'm stuck on the animation. I understand that I need to get an access to div's properties, such as height, and also move the candle's light, but I literally have no idea how I can do it.

Here's my code so far:

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

Happy Hanukkah Alice!

You need to go over all of the elements you got from getElementsByClassName (that function returns a list of elements, so you can't really use .innerHTML on that), and for each of them you need to change the height of the element.

The other problem you got is that you can't use the style.height of the element if the height is set using external CSS file. You will need to use the getComputedStyle function.

My example below will not fix all of your problems, but it will give you a good start (and a general way to solve everything else, I think).

You will still need to fix the positioning problems.

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>

If something isn't clear yet - please ask :)