如何修复：用于 if else 计算的单选按钮的广告监听器

Question

我正在尝试创建嵌入我网站的 BMR 计算。除了性别部分（如果男性与女性，不同的计算）我让它工作

我知道我需要一个广告监听器，但似乎没有用。我想我没有正确引用它。

这是我的代码：

var theForm = document.forms["RMRform"];
var bmr;

function RMRcalc() {
  var weight = document.getElementById("weight").value;
  var height = document.getElementById("height").value;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;
  var rad = document.myForm.myRadios;
  var prev = null;
  for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
      (prev) ? console.log(prev.value): null;
      if (this !== prev) {
        prev = this;
      }
      console.log(this.value)
    });
  }
  var activitylevel = new Array();
  activitylevel["sedentary"] = 1.2;
  activitylevel["low"] = 1.3;
  activitylevel["moderate"] = 1.5;
  activitylevel["high"] = 1.7;

  function getActivityLevel() {
    var activityLevelamount = 0;
    var theForm = document.forms["RMRform"];
    var selectedActivity = theForm.elements["activity"];
    activityLevelamount = activitylevel[selectedActivity.value];
    return activityLevelamount;
  }

  if (i = this) {
    bmr = ((10 * weight) + (6.25 * height) - (5 * age) - 161) * getActivityLevel();
  } else {
    bmr = ((10 * weight) + (6.25 * height) - (5 * age) + 5) * getActivityLevel();
  }

}

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  RMRcalc();
  document.getElementById('results').innerHTML = bmr;

})

  body {
  font: 15px gothic, sans-serif;
  letter-spacing: 1px;
}

input {
  width: 100%;
}

input[type=number] {
  border: none;
  border-bottom: 1px solid grey;
}

button[type=button] {
  background-color: #ddcecb;
  border: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #95483e;
  padding: 16px 32px;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 4px 2px;
}

input[type=text]:focus {
  border: 1px solid #555;
}

.form-inline label {
  margin: 5px 10px 5px 0;
}

@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

<form action="" id="RMRform">
  <label for='gender' class="inlinelabel">
      Female </label>
  <input type="radio" id="gender" name="gender" value="fem" checked onclick="RMRcalc()" /><br>
  <label for='gender' class="inlinelabel">
      Male </label>
  <input type="radio" id="gender" name='gender' value="masc" onclick="RMRcalc()" /> <br> Weight (kg):<br>
  <input type="number" id="weight"><br><br> Height (cm):<br>
  <input type="number" id="height"><br><br> Age (years):<br>
  <input type="number" id="age"><br><br> Activity Level:
  <select id="activity" name="activity">
    <option value="sedentary">sedentary (1-2x/week)</option>
    <option value="low">low (2-3x/week)</option>
    <option value="moderate">moderate (3-4x/week)</option>
    <option value="high">high (5x/week)</option>
  </select>
</form> <br>

<button type="button" onclick="">
    calculate</button>


<p>Your Daily Estimated Requirements</p>
<div id="results"></div>

有了这个，就没有计算显示了。提前致谢！

Answer 1

这是我看到的（我对 JS 很陌生，所以我可能看不到所有内容）：

没有开头的 head 标签（不确定这是否有问题）。
性别单选按钮都具有相同的 ID。 ID 应该是唯一的。因此，我的猜测是这段代码应该只为您提供 fem no ?:

html:

    <input type="radio" id="gender" name="gender" value="fem" checked 
    onclick="RMRcalc()" />
    <input type="radio" id="gender" name='gender' value="masc" 
    onclick="RMRcalc()" />

js:

    var gender = document.getElementById("gender").value;

在你的 for 循环中我会使用 let 而不是 var，否则你有一天可能会遇到麻烦。签出 this post.
```
for (let i = 0; i < rad.length; i++) {
        rad[i].addEventListener('change', function () {
```
我没看懂你的函数 RMRcalc : if (var i = this)

Answer 2

@media 查询缺少结尾 }。
您的 if 条件中不应有变量声明：if (var i=this)。删除 var.
你的两个收音机 input 有相同的 id="gender"。 Id 应该是唯一的。考虑改用 class。由于此选择器，当您稍后使用 gender 变量进行 if male vs female 计算时，这将导致问题：

   var gender = document.getElementById("gender").value;

要在您的循环中定义 rad...

   var rad = document.myForm.myRadios;

...您需要将 myRadios 更改为 gender，因为那是您的无线电输入的 name。您还需要为表单命名 myForm.

    <form action="" id="RMRform" name="myForm">

Answer 3

也许您正在寻找这个地区的东西...

function calc () {
  const gender   = document.querySelector('input[name="gender"]:checked').value,
        weight   = document.getElementById('weight').value,
        height   = document.getElementById('height').value,
        age      = document.getElementById('age').value,
        activity = document.getElementById('activity').value;

  // calculate base metric value
  let metricBase = ((10 * weight) + (6.25 * height) - (5 * age));
  // calculate per gender
  metricBase = (gender === 'fem') ? metricBase - 161 : metricBase + 5;

  // calculate with inline activity values
  const bmr = Math.round( metricBase * parseFloat(activity) );
  // format caloric intake output
  document.getElementById('results').innerHTML = `${bmr.toLocaleString()} calories/day`;
}

// prevents form change listener until after first calculation
let firstCalc = true;

document.getElementById('calc').addEventListener('click', () => {
  if (firstCalc) document.querySelector('form').onchange = calc;
  firstCalc = false;
  calc();
}, false);

body {
}

body, input {
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}

input[type="radio"] {
  display: inline-block;
  width: 1rem;
}

input[type="number"] {
  border: none;
  border-bottom: 1px solid #ccc;
}

.group {
  padding: .5rem 0;
}

<form>
  <div class="group">
    <label class="radio">
      <input type="radio" name="gender" value="fem" checked />
      Female
    </label>
    <label class="radio">
      <input type="radio" name='gender' value="masc" />
      Male
    </label>
  </div>
  <div class="group">
    <label for="weight">Weight (kg):</label>
    <input type="number" id="weight" value="79" />
  </div>
  <div class="group">
    <label for="weight">Height (cm):</label>
    <input type="number" id="height" value="172" />
  </div>
  <div class="group">
    <label for="weight">Age (years):</label>
    <input type="number" id="age" value="22" />
  </div>
  <div class="group">
    <label for="activity">Activity Level:</label>
    <select id="activity">
      <option value="1.2" selected>Sedentary (1-2x/week)</option>
      <option value="1.3">Low (2-3x/week)</option>
      <option value="1.5">Moderate (3-4x/week)</option>
      <option value="1.7">High (5x/week)</option>
    </select>
  </div>
  <button type="button" id="calc">Calculate</button>
</form>

<p id="results"></p>

如何修复：用于 if else 计算的单选按钮的广告监听器

How to fix: adlistener for radio button for if else calculation

javascript

forms

radio-button

calculation