html 为什么我的errorNotice()函数在calculateBMI()中不起作用

brc7rcf0  于 2023-03-21  发布在  其他
关注(0)|答案(1)|浏览(113)

为什么我的errorNotice()函数在calculateBMI()中不起作用?当我单击按钮时没有任何React。我希望在输入框为空时提醒用户输入一些内容。
超文本:

<div class="container"><!--Container starts-->
      <div class="grid"><!--Grid startss-->

        <div class="box box1"><!--box1 starts-->
          <label for="height">Height (in meters):</label><br>
          <input type="number" id="height" class="bmi-input bmi-input1" placeholder="Enter your height in meters">
          <br><br>
          <label for="weight">Weight (in kilograms):</label><br>
          <input type="number" id="weight" class="bmi-input bmi-input2" placeholder="Enter your weight in kilograms">
          <br><br>
          <button onclick="calculateBMI()" class="bmi-button">Calculate BMI</button>
          <br><br>
          <div id="result" class="bmi-result">0.00</div>
          <span class="result-unit">kg/m<sup>2</sup></span>

        </div><!--box1 ends-->

        <div class="box"><!--box2 starts-->

        </div><!--box2 ends-->

      </div> <!--Grid ends-->
    </div><!--Container ends-->

    <script type="text/javascript" src="bmi-calculator.js"></script>

Javascript:

function calculateBMI() {
    const height = document.getElementById("height").value;
    const weight = document.getElementById("weight").value;
    
    const bmi = weight / (height * height);
    
    const resultElement = document.getElementById("result");
    errorNotice();
}

//To alert user who refue to place an input
function errorNotice() {
    if (isNaN(bmi)) {
        alert('Enter an input');
    }
    else {
        resultElement.innerHTML = `Your BMI is ${bmi.toFixed(2)}`;
    }
}

当我没有输入时,我尝试单击按钮,但没有任何React。

eanckbw9

eanckbw91#

bmiresultElementcalculateBMI中声明,但在errorNotice中不可用
可以将它们作为参数传递给errorNotice

function calculateBMI() {
  const height = document.getElementById("height").value;
  const weight = document.getElementById("weight").value;

  const bmi = weight / (height * height);

  const resultElement = document.getElementById("result");
  errorNotice(bmi, resultElement);

}

//To alert user who refue to place an input
function errorNotice(bmi, resultElement) {
  if (isNaN(bmi)) {
    alert('Enter an input');
  } else {
    resultElement.innerHTML = `Your BMI is ${bmi.toFixed(2)}`;
  }
}
<div class="container">
  <!--Container starts-->
  <div class="grid">
    <!--Grid startss-->

    <div class="box box1">
      <!--box1 starts-->
      <label for="height">Height (in meters):</label><br>
      <input type="number" id="height" class="bmi-input bmi-input1" placeholder="Enter your height in meters">
      <br><br>
      <label for="weight">Weight (in kilograms):</label><br>
      <input type="number" id="weight" class="bmi-input bmi-input2" placeholder="Enter your weight in kilograms">
      <br><br>
      <button onclick="calculateBMI()" class="bmi-button">Calculate BMI</button>
      <br><br>
      <div id="result" class="bmi-result">0.00</div>
      <span class="result-unit">kg/m<sup>2</sup></span>

    </div>
    <!--box1 ends-->

    <div class="box">
      <!--box2 starts-->

    </div>
    <!--box2 ends-->

  </div>
  <!--Grid ends-->
</div>
<!--Container ends-->

相关问题