所以我试图让错误消息发送到该字段，但我不知道我在做什么，对此我还很陌生，很抱歉打扰你们。
这是整个代码：
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>为此，您需要在每个输入旁边放置一个单独的错误消息区域，并且每个输入都需要一个唯一的ID-当前，您有两个元素的ID为“ errorMsg”，其中一个位于布局的错误位置。ID必须（根据定义）唯一地标识一个元素，因此很显然这是行不通的。当您在代码中引用“ errorMsg”时，JavaScript只会选择它找到的第一个，并假设您的意思是那个。它无法区分它们。
但是无论如何，您实际上都不需要编写自己的代码来进行验证。如果将字段放在表单中并处理表单的Submit事件，则可以在字段本身上使用HTML5验证规则来限制允许的输入。
这是一个演示：
注意addEventListener来处理表单的“ submit”事件并运行一些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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句