Как настроить таргетинг на значение переключателя

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>