How to target the value of a radio button

Question

I am creating a multi-page form for a mobile app to help users cook pasta. I need to target the user-selected value of my radio buttons in order to use that value in the formula that calculates the amount of water and pasta needed. The calculation will be triggered upon submitting the form.The submit button is not yet coded.

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>

There's no such function as `document.getElementByClass()`. There's `document.getElementsByClassName()`, but it returns *all* the elements with that class, not just the checked one. — Barmar, May 01 '18 at 20:00

Sébastien S. · Answer 1 · 2018-05-01T20:03:48.700

0

getElementByClass("noodleType") is not a function.

You can use getElementsByClassName("noodleType") instead which will return an array containing the elements of this class. In your case you'll have to loop on them and get the value of the one being checked.

edited May 01 '18 at 20:03

answered May 01 '18 at 20:02

Sébastien S.

1,444
8
14

`getElementsByClassName` – Barmar May 01 '18 at 20:03

How to target the value of a radio button

1 Answers1