title: Wanted to know why my querySelector in js doesn't work when fetching data from an input field
body: <p>Don't really understand why my <code>querySelector</code> isn't working. When I substitute <code>querySelector</code> with <code>getElementByClass</code>, it works, I just dont understand why it wouldn't work with <code>querySelector</code>.</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>function stdCalculator() {
    let stdHeight = document.querySelector(".stdHeight")[0].value
    let stdWeight = document.querySelector("stdWeight")[0].value
    let stdDsply = document.querySelector(".stdReslt")[0]
    let stdBmi = (703 * Number(stdWeight)) / Number(stdHeight) *
      Number(stdHeight)
    return stdDsply.innerHTML = stdBmi;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;Your Height In Inches&lt;/p&gt;
    &lt;input class="stdHeight" type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;p&gt;Your Weight in Pounds&lt;/p&gt;
    &lt;input class="stdWeight" type="text"&gt;
  &lt;/div&gt;
  &lt;p class="stdReslt"&gt;BMI&lt;/p&gt;
  &lt;button onclick="stdCalculator()"&gt;Calculate&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>