如何将BMI计算器字段的错误消息添加到其下/下，而不是页面顶部

所以我正试图将错误消息放在字段旁边，但我不知道自己在做什么，我对此很陌生，很抱歉打扰你们。

这是整个代码：

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只会选择它找到的第一个，并假设您是认真的。它无法将它们区分开来。

但无论如何，对于您尝试进行的验证，实际上根本不需要编写自己的代码。如果您将字段放入表单中，并处理表单的提交事件，则可以对字段本身使用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

您试图使用元素的ID，但只能使用ID选择一个元素。您必须使用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>

相关内容

最新更新

热门标签：