如何将HTML元素数据传递到JavaScript？球体体积条件计算求助

我是一名开发新手，正在学习HTML与JavaScript关联的基础知识。多次尝试并查阅YouTube教程仍未解决，因此前来求助。我希望实现仅当选中HTML单选框时，才执行球体体积的条件计算。以下是我的代码（未包含CSS以保持简洁）：

原JavaScript代码 #

let radiusInput = document.getElementById("radiusInputSpeares");
let spearesAnswer = document.getElementById("spearesAnswer");
let spearesAnswerPi = document.getElementById("spearesAnswerPi");
let radiusOutput;

function spearesSolve() {
  radiusOutput = (radiusInput.value ** 3) * 3.14159265359 * (4 / 3);
  spearesAnswer.innerText = Math.round(radiusOutput);
  spearesAnswerPi.innerText = Math.round(radiusOutput / 3.14159265359)
}

原HTML代码 #

<div class="spearesSection">
  <div class="spearesSectionHeading" id="sectionSpearesHeading">
    <p class="spearesSectionText">Calculate the Volume of a Speare!</p>
  </div>
  <div class="workAreaSpeares">
    <img class="spearesPicture" src="../Images/Speare.jpg" alt="Error, Page cannot be loaded">
    <p class="divisionSpeareTitle">Choose Segment:</p>
    <p class="textSpearesRadius">Radius:</p>
    <input type="number" class="inputRadiusSpeare" id="radiusInputSpeares">

    <p class="aQuarterSpeare">A Quarter (1/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare1">
    <p class="halfSpeare">A Half (1/2)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare2">
    <p class="threeQuartersSpeare">Three Quarters (3/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare3">
    <p class="WholeSpeare"> Whole (4/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare4">

    <button class="buttonExecuteSpeares" id="buttonExecuteSpeares" onclick="spearesSolve()">Solve!</button>
    <p class="answerSpeare"> Answer =</p>
    <div class="outputAreaSpeare">
      <p id="spearesAnswer"></p>
    </div>
    <p class=answerSpearePi>In Terms of Pi =</p>
    <div class="outputAreaSpearePi">
      <p id="spearesAnswerPi"></p>
      <p class="piSpeare">π</p>
    </div>
  </div>
</div>

解决方案 #

关键修改点： #

• 给每个单选框添加value属性，对应球体分段的比例值
• 在计算函数中先判断是否有单选框被选中，未选中时提示用户
• 计算体积时乘以选中的分段比例

修改后的代码 #

修改后的HTML（添加value属性）

<div class="spearesSection">
  <div class="spearesSectionHeading" id="sectionSpearesHeading">
    <p class="spearesSectionText">Calculate the Volume of a Speare!</p>
  </div>
  <div class="workAreaSpeares">
    <img class="spearesPicture" src="../Images/Speare.jpg" alt="Error, Page cannot be loaded">
    <p class="divisionSpeareTitle">Choose Segment:</p>
    <p class="textSpearesRadius">Radius:</p>
    <input type="number" class="inputRadiusSpeare" id="radiusInputSpeares">

    <p class="aQuarterSpeare">A Quarter (1/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare1" value="0.25">
    <p class="halfSpeare">A Half (1/2)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare2" value="0.5">
    <p class="threeQuartersSpeare">Three Quarters (3/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare3" value="0.75">
    <p class="WholeSpeare"> Whole (4/4)</p>
    <input type="radio" name="divisionSpeare" class="divisionSpeare4" value="1">

    <button class="buttonExecuteSpeares" id="buttonExecuteSpeares" onclick="spearesSolve()">Solve!</button>
    <p class="answerSpeare"> Answer =</p>
    <div class="outputAreaSpeare">
      <p id="spearesAnswer"></p>
    </div>
    <p class=answerSpearePi>In Terms of Pi =</p>
    <div class="outputAreaSpearePi">
      <p id="spearesAnswerPi"></p>
      <p class="piSpeare">π</p>
    </div>
  </div>
</div>

修改后的JavaScript（添加选中判断和比例计算）

let radiusInput = document.getElementById("radiusInputSpeares");
let spearesAnswer = document.getElementById("spearesAnswer");
let spearesAnswerPi = document.getElementById("spearesAnswerPi");

function spearesSolve() {
  // 获取选中的单选框
  const selectedSegment = document.querySelector('input[name="divisionSpeare"]:checked');
  
  // 判断是否选中了单选框
  if (!selectedSegment) {
    spearesAnswer.innerText = "请先选择球体分段";
    spearesAnswerPi.innerText = "";
    return;
  }

  // 获取半径值，确保是数字
  const radius = parseFloat(radiusInput.value);
  if (isNaN(radius) || radius <= 0) {
    spearesAnswer.innerText = "请输入有效的半径值";
    spearesAnswerPi.innerText = "";
    return;
  }

  // 获取选中的比例
  const segmentRatio = parseFloat(selectedSegment.value);
  
  // 计算体积：完整球体体积 * 比例
  const fullVolume = (radius ** 3) * Math.PI * (4 / 3);
  const radiusOutput = fullVolume * segmentRatio;
  
  spearesAnswer.innerText = Math.round(radiusOutput);
  spearesAnswerPi.innerText = Math.round(radiusOutput / Math.PI);
}

额外优化说明： #

• 使用Math.PI替代硬编码的π值，更准确规范
• 添加了半径值的有效性判断，避免无效输入导致计算错误
• 未选中单选框或输入无效时，给出明确提示

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