為什么在事件處理程序之外初始化變量然后重新分配它只允許代碼工作一次？

Question

我正在制作一個 BMI 計算器，但它只能使用一次。 我不明白。 我在 click 事件處理程序之外初始化了 2 個 let 變量，只是為了獲取輸入元素。 當我想使用“Number()”轉換變量的值時，它工作了一次。

我一直在玩代碼，直到每次單擊按鈕時它都能正常工作。 但我不明白為什么它現在起作用了。 因此，我移動了變量的聲明和初始化，以獲取單擊事件處理程序中的輸入元素。

我不明白其中的邏輯。 這是相同的代碼。 唯一真正的區別是在單擊事件處理程序內外聲明和初始化的輸入元素變量。 有問題的變量是“重量”和“高度”。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="script.js" defer></script>
</head>
<body>
  <div style="display: inline-block; vertical-align: top;">
    <div>
      <div>Weight:</div>
      <div><input type="text" id="weight" style="text-align: end;"></div>
    </div>
    <div>
      <div>Height:</div>
      <div><input type="text" id="height" style="text-align: end;"></div>
    </div>
    <button id="btn" style="margin-top: 10px;">Calculate</button>
    <p id="result"></p>
  </div>
  <div style="display: inline-block; vertical-align: top; background-color: aquamarine; border-radius: 7px;">
    <p>BMI Range</p>
    <div>
      <div style="display: inline;">Less than 18.5:</div>
      <p id="underweight" style="display: inline;">Underweight</p>
    </div>
    <div>
      <div style="display: inline;">18.5-24.9:</div>
      <p id="healthy" style="display: inline;">Healthy</p>
    </div>
    <div>
      <div style="display: inline;">25-29.9:</div>
      <p id="overweight" style="display: inline;">Overweight</p>
    </div>
    <div>
      <div style="display: inline;">Over 30:</div>
      <p id="obese" style="display: inline;">Obese</p>
    </div>
  </div>
</body>
</html>

下面的 js 只工作一次！！

const btn = document.getElementById("btn")
const result = document.getElementById("result")

let underWeight = document.getElementById("underweight")
let healthy = document.getElementById("healthy")
let overWeight = document.getElementById("overweight")
let obese = document.getElementById("obese")

let weight = document.getElementById("weight")
let height = document.getElementById("height")

btn.addEventListener('click', () => {
  weight = Number(weight.value);
  height = Number(height.value);
  if(isNaN(weight) || isNaN(height) || height === 0 || weight === 0){
    result.innerHTML = "Please type a number"
  } else{
    const bmi = Math.floor(weight/Math.pow(height, 2))
    if(bmi < 18.5){
      result.innerHTML = "You are Underweight. Your BMI is  " + bmi;
    } else if(bmi >= 18.4 && bmi <= 24.9){
      result.innerHTML = "You are Healthy. Your BMI is " + bmi;
    } else if(bmi >= 25 && bmi <= 29.9){
      result.innerHTML = "You are Overweight. Your BMI is " + bmi;
    } else{
      result.innerHTML = "You are Obese. Your BMI is " + bmi;
    }
  }
})

下面的js確實有效！

const btn = document.getElementById("btn")
const result = document.getElementById("result")

let underWeight = document.getElementById("underweight")
let healthy = document.getElementById("healthy")
let overWeight = document.getElementById("overweight")
let obese = document.getElementById("obese")

btn.addEventListener('click', () => {
  let weight = Number(document.getElementById("weight").value);
  let height = Number(document.getElementById("height").value);
  if(isNaN(weight) || isNaN(height) || height === 0 || weight === 0){
    result.innerHTML = "Please type a number"
  } else{
    const bmi = Math.floor(weight/Math.pow(height, 2))
    if(bmi < 18.5){
      result.innerHTML = "You are Underweight. Your BMI is  " + bmi;
    } else if(bmi >= 18.4 && bmi <= 24.9){
      result.innerHTML = "You are Healthy. Your BMI is " + bmi;
    } else if(bmi >= 25 && bmi <= 29.9){
      result.innerHTML = "You are Overweight. Your BMI is " + bmi;
    } else{
      result.innerHTML = "You are Obese. Your BMI is " + bmi;
    }
  }
})

Answer 1

當你做

weight = Number(weight.value);

您正在重新分配全局變量weight 。 下一次事件偵聽器運行時， weight不再引用輸入元素，它包含上一次鍵入的數字。 所以weight.value不會返回輸入的內容。 它返回undefined因為數字沒有value屬性，而Number(undefined)返回NaN 。

盡量避免重復使用變量名。 將其更改為類似

let weight_value = Number(weight.value);

（和height類似）並且您的代碼將起作用。

為什么在事件處理程序之外初始化變量然后重新分配它只允許代碼工作一次？

問題描述

1 個解決方案

解決方案1
2 2023-01-17 00:53:20

為什么在事件處理程序之外初始化變量然后重新分配它只允許代碼工作一次？

問題描述

1 個解決方案

解決方案1 2 2023-01-17 00:53:20

解決方案1
2 2023-01-17 00:53:20