JavaScript公式数学公式会产生奇怪的数字

Question

我无法理解这一点。我创建了一个html表单，用一个条件字段(基于选择的性别(来计算体脂%。JavaScript公式对男性版本给出了正确的答案，但对女性版本给出了奇怪的结果。两个公式相同，只是变量不同。

有人知道是什么导致了这个问题吗？或者我遗漏了什么？

这是我的html表单：

<div class="gf_browser_chrome gform_wrapper gform_legacy_markup_wrapper">
<form enctype='multipart/form-data' id='WB_1'>
<div class='gform_body gform-body'>
<ul id='WB_fields_1' class='gform_fields top_label form_sublabel_below description_below'>
<li id="geslacht"
class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_geslacht'>Geslacht<span class="gfield_required"><span
class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_select'><select name='input_geslacht_1_1'
id='input_geslacht_1' class='small gfield_select' aria-required="true" aria-invadivd="false"
onchange="geslachtSwitch(this)">
<option value='Man'>Man</option>
<option value='Vrouw'>Vrouw</option>
</select></div>
</li>
<li id="lengte"
class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_lengte'>Lengte in cm<span class="gfield_required"><span
class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_number'><input name='input_lengte_1_1'
id='input_lengte_1' type='text' value='' class='small' aria-required="true"
aria-invadivd="false" />
</div>
</li>
<li id="taille"
class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_taille'>Taille omtrek in cm<span
class="gfield_required"><span
class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_number'><input name='input_taille_1_1'
id='input_taille_1' type='text' value='' class='small' aria-required="true"
aria-invadivd="false" aria-describedby="gfield_instruction_1_2" />
<div class='instruction ' id='gfield_instruction_1_2'>Voor mannen gemeten op navelhoogte, voor
vrouwen gemeten op het smalste punt.</div>
</div>
</li>
<li id="nek"
class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_nek'>Nek omtrek in cm<span class="gfield_required"><span
class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_number'><input name='input_nek_1_1' id='input_nek_1'
type='text' value='' class='small' aria-required="true" aria-invadivd="false"
aria-describedby="gfield_instruction_1_3" />
<div class='instruction ' id='gfield_instruction_1_3'>Gemeten net onder je strottenhoofd. Het
meetdivnt zit aan de voorkant wat lager dan aan de achterkant van je nek.</div>
</div>
</li>
<li id="heup" style="display:none"
class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_heup'>Heup omtrek in cm<span class="gfield_required"><span
class="gfield_required gfield_required_asterisk">*</span></span></label>
<div class='ginput_container ginput_container_number'><input name='input_heup_1_1' id='input_heup_1'
type='text' value='' class='small' aria-required="true" aria-invadivd="false"
aria-describedby="gfield_instruction_1_4" />
<div class='instruction ' id='gfield_instruction_1_4'>Gemeten op het breedste punt.</div>
</div>
</li>
<li id="button"
class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibidivty_visible">
<button style="color:white; background-color:black;" onclick="vetLoad()" type="button"
value="berekenen">VETPERCENTAGE BEREKENEN</button>
</li>
<li id="vet"
class="gfield gfield_calculation field_sublabel_below field_description_below gfield_visibidivty_visible">
<label class='gfield_label' for='input_vet'>Vetpercentage</label>
<div class='ginput_container ginput_container_number'><input name='input_vet_1_1' id='input_vet_1'
type='text' value='%' class='small' readonly="readonly" placeholder='%'
aria-invadivd="false" />
</div>
</li>
</ul>
</div>
</form>
</div>

这是我的JS脚本：

function vetLoad() {
geslacht = document.getElementById('input_geslacht_1');
lengte = document.getElementById('input_lengte_1').value;
taille = document.getElementById('input_taille_1').value;
nek = document.getElementById('input_nek_1').value;
heup = document.getElementById('input_heup_1').value;
if (geslacht.value == "Man" || geslacht.options[geslacht.selectedIndex].value == "Man") {
percentage = 86.010 * Math.log10(taille - nek) - 70.041 * Math.log10(lengte) + 30.30;
}
else if (geslacht.value == "Vrouw" || geslacht.options[geslacht.selectedIndex].value == "Vrouw") {
percentage = 163.205 * Math.log10(taille + heup - nek) - 97.684 * Math.log10(lengte) - 104.912;
}
percentage0 = Math.round(percentage);
document.getElementById('input_vet_1').value = percentage;
}
</script>

更新：改进代码：

<script type="text/javascript">geslacht
function geslachtSwitch(geslacht) {
if (geslacht.value == "Man" || geslacht.options[geslacht.selectedIndex].value == "Man") {
document.getElementById('heup').style.display = "none";
}
if (geslacht.value == "Vrouw" || geslacht.options[geslacht.selectedIndex].value == "Vrouw") {
document.getElementById('heup').style.display = "block";
}
}
function vetLoad() {
geslacht = document.getElementById('input_geslacht_1');
lengte = document.getElementById('input_lengte_1').value;
taille = document.getElementById('input_taille_1').value;
nek = document.getElementById('input_nek_1').value;
heup = document.getElementById('input_heup_1').value;
if (geslacht.value == "Man" || geslacht.options[geslacht.selectedIndex].value == "Man") {
percentage = 86.010 * Math.log10(taille - nek) - 70.041 * Math.log10(lengte) + 30.30;
}
else if (geslacht.value == "Vrouw" || geslacht.options[geslacht.selectedIndex].value == "Vrouw") {
percentage = 163.205 * Math.log10(Number(taille) + Number(heup) - Number(nek)) - 97.684 * Math.log10(lengte) - 104.912;
}
percentage0 = Math.round(percentage);
document.getElementById('input_vet_1').value = percentage0;
}
</script>

Answer 1

解决我问题的Robin的回答：所有读取各种输入的.value的变量都是字符串，所以你的问题是taille+heup将进行字符串连接。您应该首先将值转换为数字，+运算符或数字函数

原因(斯科特(：除了Robin的评论之外，它对Men有效的原因是，对于男性来说，你对值的第一个运算是-，这将在减法之前将其值强制为数字。Women的第一个操作是+，它将简单地连接字符串

这就是我更新后的脚本的样子：

<script type="text/javascript">geslacht
function geslachtSwitch(geslacht) {
if (geslacht.value == "Man" || geslacht.options[geslacht.selectedIndex].value == "Man") {
document.getElementById('heup').style.display = "none";
}
if (geslacht.value == "Vrouw" || geslacht.options[geslacht.selectedIndex].value == "Vrouw") {
document.getElementById('heup').style.display = "block";
}
}
function vetLoad() {
geslacht = document.getElementById('input_geslacht_1');
lengte = document.getElementById('input_lengte_1').value;
taille = document.getElementById('input_taille_1').value;
nek = document.getElementById('input_nek_1').value;
heup = document.getElementById('input_heup_1').value;
if (geslacht.value == "Man" || geslacht.options[geslacht.selectedIndex].value == "Man") {
percentage = 86.010 * Math.log10(taille - nek) - 70.041 * Math.log10(lengte) + 30.30;
}
else if (geslacht.value == "Vrouw" || geslacht.options[geslacht.selectedIndex].value == "Vrouw") {
percentage = 163.205 * Math.log10(Number(taille) + Number(heup) - Number(nek)) - 97.684 * Math.log10(lengte) - 104.912;
}
percentage0 = Math.round(percentage);
document.getElementById('input_vet_1').value = percentage0;
}
</script>