如何为 BMI 计算器字段 next/under 添加错误消息而不是在页面顶部？

Question

所以我正在尝试让错误消息出现在该字段旁边，但我不知道我在做什么，我对此很陌生，很抱歉打扰你们。

完整代码如下：

function computeBMI() {

  var height = 0;
  var weight = 0;
  height = Number(document.getElementById("height").value);
  weight = Number(document.getElementById("weight").value);
  if (height == 0 | height > 220) {
    document.getElementById('errorMsg').innerHTML = "Use Appropriate Height";
    return 0;
  }
  if (weight == 0 | weight < 20) {
    document.getElementById('errorMsg').innerHTML = "Use Appropriate Weight";
    return 0;
  }

  var BMI = weight / (height / 100 * height / 100);
  document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
  var output = Math.round(BMI * 100) / 100;
  if (output < 18.5)
    document.getElementById("comment").innerText = "Underweight";
  else if (output >= 18.5 && output <= 25)
    document.getElementById("comment").innerText = "Normal";
  else if (output > 25)
    document.getElementById("comment").innerText = "Overweight";
}

<html>

<head>
  <title>BMI Calculator</title>
</head>

<body>
  <div id="errorMsg"></div>
  <h1>Body Mass Index Calculator</h1>
  <p>Enter your height: <input type="text" id="height" /></p> <span id="errorMsg"><
<p>Enter your weight: <input type="text" id="weight"/></p>

<input type="submit" value="computeBMI" onclick="computeBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>

  <h2>This means you are: <span id="comment"> ?</span> </h2>
</body>

Answer 1

按照您的方式进行操作，您需要在每个输入旁边有一个单独的错误消息区域，并且每个输入都需要一个唯一的 ID - 目前您有两个 ID 为“errorMsg”的元素，其中一个在布局中的错误位置。 ID 必须（根据定义）唯一标识一个元素，很明显这是行不通的。当您在代码中引用“errorMsg”时，JavaScript 将只选择它找到的第一个并假设您指的是那个。它无法区分它们。

但无论如何，对于您尝试进行的验证，您实际上根本不需要编写自己的代码。如果将字段放在表单中，并处理表单的提交事件，则可以在字段本身上使用 HTML5 验证规则来限制允许的输入。

这是一个演示：

注意处理表单的“提交”事件的 addEventListener 和运行一些 Javascript。另请注意字段和按钮周围的 <form> 和 </form> 标记，最后是 type="number"、required、min 和 max 属性输入字段本身。

var form = document.getElementById("BMIForm");

form.addEventListener("submit", function(event) {
 event.preventDefault(); //stop a postback
 computeBMI();
});

function computeBMI() {

  var height = 0;
  var weight = 0;
  height = Number(document.getElementById("height").value);
  weight = Number(document.getElementById("weight").value);

  var BMI = weight / (height / 100 * height / 100);
  document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
  var output = Math.round(BMI * 100) / 100;

  if (output < 18.5)
    document.getElementById("comment").innerText = "Underweight";
  else if (output >= 18.5 && output <= 25)
    document.getElementById("comment").innerText = "Normal";
  else if (output > 25)
    document.getElementById("comment").innerText = "Overweight";
}

<html>

<head>
  <title>BMI Calculator</title>
</head>

<body>
  <h1>Body Mass Index Calculator</h1>
  <form id="BMIForm">
  <p>Enter your height: <input type="number" required min="0" max="220" id="height" /></p>
  <p>Enter your weight: <input type="number" required min="0" max="20" id="weight"/></p>

<input type="submit" value="computeBMI">
</form>
<h1>Your BMI is: <span id="output">?</span></h1>

 <h2>This means you are: <span id="comment"> ?</span> </h2>
</body>

您可以在此处了解有关 HTML 表单验证的更多信息：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Answer 2

您尝试使用元素的 ID，但只能 select 一个元素使用 ID。您必须使用 class，然后 select 满足元素列表中的哪个元素包含您想要的 class。

此外，我稍微更新了您的代码，因此它不会验证答案是否属于反类别，而是检查它是否不属于指定类别。

function computeBMI() {
  document.getElementsByClassName('errorMsg')[0].innerHTML = ""
  document.getElementsByClassName('errorMsg')[1].innerHTML = ""
  var height = parseInt(document.getElementById("height").value);
  var weight = parseInt(document.getElementById("weight").value);
  var returnVal = false
  if (!(height > 0 && height <= 220)) {
    document.getElementsByClassName('errorMsg')[0].innerHTML = "Use Appropriate Height";
    returnVal = returnVal || true
  }
  if (!(weight > 0 && weight < 20)) {
    document.getElementsByClassName('errorMsg')[1].innerHTML = "Use Appropriate Weight";
    returnVal = returnVal || true
  }
  if (returnVal) {
    return 0
  }

  var BMI = weight / (height / 100 * height / 100);
  document.getElementById("output").innerText = Math.round(BMI * 100) / 100;
  var output = Math.round(BMI * 100) / 100;
  if (output < 18.5)
    document.getElementById("comment").innerText = "Underweight";
  else if (output >= 18.5 && output <= 25)
    document.getElementById("comment").innerText = "Normal";
  else if (output > 25)
    document.getElementById("comment").innerText = "Overweight";
}

<html>

<head>
  <title>BMI Calculator</title>
</head>

<body>
  <h1>Body Mass Index Calculator</h1>
  Enter your height:
  <input type="text" id="height" placeholder="height" />
  <span class="errorMsg"></span><br> Enter your weight:
  <input type="text" id="weight" placeholder="weight" />
  <span class="errorMsg"></span><br>

  <input type="submit" value="computeBMI" onclick="computeBMI();">
  <h1>Your BMI is: <span id="output">?</span></h1>

  <h2>This means you are: <span id="comment"> ?</span> </h2>
</body>

如何为 BMI 计算器字段 next/under 添加错误消息而不是在页面顶部？

How do I add the error message for BMI calculator fields next/under them instead of on the top of the page?

html

javascript

css

field