0

Don't really understand why my querySelector isn't working. When I substitute querySelector with getElementByClass, it works, I just dont understand why it wouldn't work with querySelector.

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;
}
<div>
  <p>Your Height In Inches</p>
  <input class="stdHeight" type="text">
</div>
<div>
  <p>Your Weight in Pounds</p>
  <input class="stdWeight" type="text">
</div>
<p class="stdReslt">BMI</p>
<button onclick="stdCalculator()">Calculate</button>
j08691
  • 204,283
  • 31
  • 260
  • 272
Ganda W Maung
  • 31
  • 3
  • 1
    `querySelector` returns *one* element only. `querySelectorAll` returns multiple. – VLAZ Oct 28 '21 at 18:59
  • 1
    Note also the typo in `document.querySelector("stdWeight")`. You're missing the period before the class name – j08691 Oct 28 '21 at 19:03

0 Answers0