网站BMR/TDEE计算器单选按钮计算及相关功能实现问题求助

一、HTML 调整 #

仅需在原有代码的重置按钮下方新增平均结果展示区域，原有代码无需改动：

<br>
<label class="mts-label">平均BMR结果</label>
<input  type="text" class="mts-field" id="avg_bmr" placeholder="0.000,0 Kcal" readonly/>

<br>
<label class="mts-label">平均TDEE结果</label>
<input  type="text" class="mts-field" id="avg_tdee" placeholder="0.000,0 Kcal" readonly/>

原有number输入框的maxlength属性保留即可，后续JS会使其生效。

二、完整JS代码（替换原有全部JS） #

// number输入框长度限制逻辑
document.querySelectorAll('input[type="number"].mts-field').forEach(input => {
  input.addEventListener('input', () => {
    const maxLen = input.getAttribute('maxlength');
    if(maxLen && input.value.length > Number(maxLen)) {
      input.value = input.value.slice(0, Number(maxLen));
    }
  })
})

// 计算函数
function calculate() {
  const weight = Number(document.getElementById('weight').value);
  const height = Number(document.getElementById('height').value);
  const age = Number(document.getElementById('age').value);
  const bodyfat = Number(document.getElementById('bodyfat').value) / 100;

  // 获取选中的活动水平值
  const selectedActivity = document.querySelector('input[name="radiosa"]:checked');
  if(!selectedActivity) {
    alert('请选择活动水平');
    return;
  }
  const activityCoeff = Number(selectedActivity.value);

  // 获取选中的性别，控制Mifflin结果显示
  const selectedSex = document.querySelector('input[name="radios"]:checked');
  if(!selectedSex) {
    alert('请选择性别');
    return;
  }
  const isMale = selectedSex.value === 'Male';
  // 控制显示隐藏
  document.getElementById('bmr-sexuomo').style.display = isMale ? 'block' : 'none';
  document.getElementById('MifflinMale').style.display = isMale ? 'block' : 'none';
  document.getElementById('bmr-sexdonna').style.display = isMale ? 'none' : 'block';
  document.getElementById('MifflinFemale').style.display = isMale ? 'none' : 'block';

  // 计算各公式BMR
  const bmr_mifflin_man = 10 * weight + 6.25 * height - 5 * age + 5;
  const bmr_mifflin_woman = 10 * weight + 6.25 * height - 5 * age - 161;
  const bmr_katch = 370 + 21.6 * weight * (1 - bodyfat);
  const bmr_cunningham = 500 + 22 * weight * (1 - bodyfat);

  // 赋值Mifflin BMR结果
  document.getElementById('bmr_mifflin_man').value = `${bmr_mifflin_man.toLocaleString('it-IT')} Kcal`;
  document.getElementById('bmr_mifflin_woman').value = `${bmr_mifflin_woman.toLocaleString('it-IT')} Kcal`;

  // 计算各公式TDEE
  const tdee_mifflin_man = bmr_mifflin_man * activityCoeff;
  const tdee_mifflin_woman = bmr_mifflin_woman * activityCoeff;
  const tdee_katch = bmr_katch * activityCoeff;
  const tdee_cunningham = bmr_cunningham * activityCoeff;

  // 赋值Mifflin TDEE结果
  document.getElementById('tdee_mifflin_man').value = `${tdee_mifflin_man.toLocaleString('it-IT')} Kcal`;
  document.getElementById('tdee_mifflin_woman').value = `${tdee_mifflin_woman.toLocaleString('it-IT')} Kcal`;

  // 赋值Katch结果
  document.getElementById('bmr_katch').value = `${bmr_katch.toLocaleString('it-IT')} Kcal`;
  document.getElementById('tdee_katch').value = `${tdee_katch.toLocaleString('it-IT')} Kcal`;

  // 赋值Cunningham结果
  document.getElementById('bmr_cunningham').value = `${bmr_cunningham.toLocaleString('it-IT')} Kcal`;
  document.getElementById('tdee_cunningham').value = `${tdee_cunningham.toLocaleString('it-IT')} Kcal`;

  // 计算平均值
  const validBmr = isMale ? [bmr_mifflin_man, bmr_katch, bmr_cunningham] : [bmr_mifflin_woman, bmr_katch, bmr_cunningham];
  const avgBmr = validBmr.reduce((a,b) => a + b, 0) / validBmr.length;
  const validTdee = isMale ? [tdee_mifflin_man, tdee_katch, tdee_cunningham] : [tdee_mifflin_woman, tdee_katch, tdee_cunningham];
  const avgTdee = validTdee.reduce((a,b) => a + b, 0) / validTdee.length;

  // 赋值平均结果
  document.getElementById('avg_bmr').value = `${avgBmr.toLocaleString('it-IT')} Kcal`;
  document.getElementById('avg_tdee').value = `${avgTdee.toLocaleString('it-IT')} Kcal`;
}

// 重置函数
function resetFields(){
  document.querySelectorAll('input').forEach(input => {
    input.value = "";
  });
  // 重置显示状态
  document.getElementById('bmr-sexuomo').style.display = 'block';
  document.getElementById('MifflinMale').style.display = 'block';
  document.getElementById('bmr-sexdonna').style.display = 'block';
  document.getElementById('MifflinFemale').style.display = 'block';
}

各问题对应解决逻辑说明 #

• 问题1：通过querySelector直接获取选中的活动水平单选框的系数值，和对应BMR相乘即可得到TDEE值
• 问题2：获取选中性别后，动态切换Mifflin公式男女结果容器的显示/隐藏状态，其余公式容器不受影响
• 问题3：监听所有number类型输入框的输入事件，当输入长度超过预设的maxlength值时自动截断内容，实现长度限制
• 问题4：聚合当前性别下生效的所有BMR、TDEE结果，求和后除以数量得到平均值，赋值到新增的结果输入框

内容的提问来源于stack exchange，提问作者Snake93