为什么在事件处理程序之外初始化变量然后重新分配它只允许代码工作一次？

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