Question

我正在为移动应用创建一个多页面表单，以帮助用户烹饪面食。我需要定位用户选择的单选按钮值，以便在公式中使用该值来计算所需的水量和面食量。提交表格时将触发计算。提交按钮尚未编码。

var servingSize;
var hungerFactor = document.getElementById("hunger").value;
var noodleType = document.getElementByClass("noodleType").value;
var numPeople = document.getElementById("people").value;

var pastaAmount;
var waterAmount;

function calculate() {

  if (noodleType === "long") {
    servingSize = 1;
  } else if (noodleType === "shape") {
    servingSize = 0.75;
  } else if (noodleType === "short") {
    servingSize = 0.5;
  }

  pastaAmount = numPeople * hungerFactor * servingSize;

  // to change cup to cups depending on amount
  if (pastaAmount > 1) {
    document.getElementById("pastaCalc").innerHTML = pastaAmount + " CUPS OF PASTA";
  } else {
    document.getElementById("pastaCalc").innerHTML = pastaAmount + " CUP OF PASTA";
  }

  var waterMultiplier; // number to be multiplied by pastaAmount

  if (noodleType === "long") {
    waterMultiplier = 3;
  } else {
    waterMultiplier = 2; // for short and shape
  }

  waterAmount = pastaAmount * waterMultiplier;

  // to change cup to cups depending on amount
  if (waterAmount > 1) {
    document.getElementById("waterCalc").innerHTML = waterAmount + " CUPS OF WATER";
  } else {
    document.getElementById("waterCalc").innerHTML = waterAmount + " CUP OF WATER";
  }
}

calculate();

<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>How many people are dining?</h1>
  <p>MOVE THE SLIDER</p>
  <div class="sliderContainer">
    <input type="range" min="1" max="8" value="4" id="people" class="slider">
  </div>
</div>
<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>How hungry are the diners?</h1>
  <p>MOVE THE SLIDER</p>
  <div class="sliderContainer">
    <input type="range" min="1" max="8" value="4" class="slider" id="hunger">
  </div>
</div>
<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>What kind of pasta are you cooking?</h1>
  <ul id="radioHolder">
    <li><label>MACARONI</label><input type="radio" name="radio" class="noodleType" value="short"></li>
    <li><label>SPAGHETTI</label><input type="radio" name="radio" class="noodleType" value="long"></li>
    <li><label>FARFALLE</label><input type="radio" name="radio" class="noodleType" value="shape"></li>
    <li><label>RAVIOLI</label><input type="radio" name="radio" class="noodleType" value="shape"></li>
    <li><label>LINGUINE</label><input type="radio" name="radio" class="noodleType" value="long"></li>
    <li><label>PENNE</label><input type="radio" name="radio" class="noodleType" value="short"></li>
  </ul>
</div>

Answer 1

getElementByClass("noodleType")不是一个功能。

您可以使用getElementsByClassName("noodleType")代替它，它将返回包含此类元素的数组。在你的情况下，你将需要循环它们并获得被检查的值。

如何定位单选按钮的值

1 个答案: