javascript - 如何修复 : adlistener for radio button for if else calculation

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

1. @media 查询缺少结束 。

2. if 条件中不应有变量声明:if (var i=this)。删除 var。

3. 您的两个 radio input 具有相同的 id="gender"。 Id 应该是唯一的。考虑改用 class。由于这个选择器，当您稍后使用 gender 变量进行 if male vs female 计算时，这会导致问题:

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

1. 要在循环中定义 rad...

   var rad = document.myForm.myRadios;

...您需要将 myRadios 更改为 gender，因为那是您的 radio 输入的 name。您还需要为表单指定名称 myForm。

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