title: Why does form not reset (all fields and div of result) after click clear?
body: <p>I want display div <code>id="showResult"</code> after click calculate button and clear all input and div <code>id="showResult"</code> after click clear button in a form. But clear button doesn't work after I click the button.</p>
  
  <p>What's the problem? How can I solve this problem?</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>window.onload = function BMR() {
    var gender = document.getElementById('gender');
    var weight = document.getElementById('weight');
    var height = document.getElementById('height');
    var age = document.getElementById('age');
    var calculate = document.getElementById('calculate');
    calculate.addEventListener('click', toBmr);
  
    function toBmr() {
      var select = null;
  
      if (gender.value &amp;&amp; weight.value &amp;&amp; height.value &amp;&amp; age.value) {
        if (document.getElementById('gender').checked) {
          select = document.getElementById('gender').value;
        }
  
        if (select == 'male') {
          var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5;
          document.getElementById('result').innerHTML = Number(result).toFixed(2);
        } else {
          var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) - 161;
          document.getElementById('result').innerHTML = Number(result).toFixed(2);
        }
        document.getElementById('showResult').style.display = "block";
      } else {
        result = " ";
      }
    };
  };
  
  function clearForm() {
    document.getElementById("do-form").reset();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="do-form" id="do-form"&gt;
    &lt;p&gt;BMR Calculator&lt;/p&gt;
    &lt;p&gt;Gender:
      &lt;input type="radio" id="gender" name="gender" value="male" checked="checked"&gt;Male
      &lt;input type="radio" id="gender" name="gender" value="female"&gt;Female
    &lt;/p&gt;
    &lt;p&gt;Weight:&amp;nbsp;&lt;input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length &gt; 5) return false;"&gt;&amp;nbsp;kg&lt;/p&gt;
    &lt;p&gt;Height:&amp;nbsp;&lt;input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length &gt; 5) return false;"&gt;&amp;nbsp;cm&lt;/p&gt;
    &lt;p&gt;Age:&amp;nbsp;&lt;input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length &gt; 2) return false;"&gt;&lt;/p&gt;
    &lt;button type="button" id="calculate"&gt;Calculate&lt;/button&gt;
    &lt;button type="button" id="clear" onclick="clearForm()"&gt;Clear&lt;/button&gt;&lt;br&gt;&lt;br&gt;
    &lt;div class="row-result-tab" id="showResult" style="display:none;"&gt;
      &lt;label&gt;BMR = &amp;nbsp;&lt;span id="result"&gt;&lt;/span&gt;&amp;nbsp;calories/day&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>