title: why the height is not set by javascript?
body: <p>i am trying to make the blocks in the row at the same height and take the height of the longest block. how can i do this because my code is not working.</p>
  
  <p>i would like to select the blocks in loop not by selecting one by one by id but i cant do it.</p>
  
  <p>i will write down the html and css and js code below.</p>
  
  <p>nb: there will be more than one row in the project.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* global document */
  var b_1 = document.getElementById("block_1"),
    b_2 = document.getElementById("block_2"),
    b_3 = document.getElementById("block_3");
  
  function equalHeight() {
    var b1h = b_1.offsetHeight,
      b2h = b_2.offsetHeight,
      b3h = b_3.offsetHeight;
  
    if (b1h &gt; b2h &amp;&amp; b1h &gt; b3h) {
      b_2.style.height = b1h;
      b_3.style.height = b1h;
    } else if (b2h &gt; b1h &amp;&amp; b2h &gt; b3h) {
      b_1.style.height = b2h;
      b_3.style.height = b2h;
    } else if (b3h &gt; b1h &amp;&amp; b3h &gt; b2h) {
      b_2.style.height = b3h;
      b_1.style.height = b3h;
    }
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
    width: 32%;
    display: inline-block;
    border: 2px solid #056c7c;
    margin-bottom: 10px;
    vertical-align: top;
    padding: 10px;
  }
  
  .blocks {
    margin-top: 50px;
    margin-bottom: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container blocks"&gt;
  
    &lt;div id="row_1"&gt;
      &lt;div class="block" id="block_1"&gt;
        &lt;h2&gt;Block 1&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="block" id="block_2"&gt;
        &lt;h2&gt;Block 2&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="block" id="block_3"&gt;
        &lt;h2&gt;Block 3&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>