时间戳

首页 > 解决方案 > Javascript 检查/验证三个字段的总和为 1

javascript - Javascript 检查/验证三个字段的总和为 1

问题描述

我正在创建一个营养 JavaScript 计算器，用户可以在其中输入每日卡路里摄入量并选择碳水化合物、蛋白质和脂肪的百分比。结果是每种营养素的卡路里和克数百分比。我有它的工作，但...

作为数学检查/验证，我想包含一些代码，这些代码将把选定的碳水化合物、蛋白质和脂肪百分比相加，并确保它们正好等于 1（或 100%）。如果这不是真的，那么我希望弹出一个小警报/错误消息，以便他们知道在“计算”按钮起作用之前返回并修复此问题。

这是我试图确保加起来为 1 的相关代码

提前感谢您提供的任何建议。

我是 JS 的相对新手，所以我什至不确定在这种情况下我需要使用的确切代码。

<script type="text/javascript">
function calc (form) {
var C, P, F 

P=form.Protein.options[form.Protein.selectedIndex].value
F=form.Fat.options[form.Fat.selectedIndex].value
C=form.Carbohydrate.options[form.Carbohydrate.selectedIndex].value

}
</script>

标签： javascript

解决方案

function calc(form) {
    const errorEl = document.getElementById('error');

   // Clear the error before calculating the new value.
   errorEl.innerText = 'Your error message';

   const protein = form.Protein.options[form.Protein.selectedIndex].value;
   const fat = form.Fat.options[form.Fat.selectedIndex].value;
   const carbohydrate = form.Carbohydrate.options[form.Carbohydrate.selectedIndex].value;

   if (Number.isNaN(prtein) || Number.isNaN(fat) || Number.isNaN(carbohydrate)) {
       document.getElementById('error').innerText = 'Your error message';
       return;
   }

   const sum = parseFloat(protein) + parseFloat(fat) + parseFloat(carbohydrate);

   if (sum > 1) {
       document.getElementById('error').innerText = 'Your error message';
   }
}

而且您还需要一个带有errorid 的元素在您的表单中显示错误消息。例如<p id="error"></p>

推荐阅读