How to display value using radio buttons in javascript and add it with checkboxes value?

Question

I'm trying to add the radio button and the checkboxes, but I'm either getting a nan value from the checkboxes or nothing is displayed if I add them both. I'm not sure why I am not getting the answer I thought I've understood through my code, especially on javascript.

function calculatePrice() {
  var i;
  var resultmessage = "";
  var pizzamount = parseFloat(0);
  var radval;
  var radval2;
  var chckbox;
  var totalvalue = parseInt(0);

  for (i = 0; i < document.cost.typed.length; i++) {
    if (document.cost.typed[i].checked) {
      radval = document.i.typed[i].value;
    }
  }

  if (document.cost.cheese.checked) {
    pizzamount += 150 / 100;
  }
  if (document.cost.pepperoni.checked) {
    pizzamount += 150 / 100;
  }

  radval = parseFloat(radval);
  pizzamount = parseFloat(pizzamount)
  var resultmessage = "Total cost: $" + pizzamount;
  document.getElementById("result").innerHTML = resultmessage;
}

<form name="cost" autocomplete="on">
  <table class="left" border="1px">
    <tr>
      <th>
        Choose a Pizza Size
      </th>
    </tr>
    <tr>
      <td>
        <input type="radio" name="typed" value="18" checked>Extra Large
        <br>
        <input type="radio" name="typed" value="15">Large
        <br>
        <input type="radio" name="typed" value="10">Medium
        <br>
        <input type="radio" name="typed" value="8">Small
        <br>
      </td>
    </tr>
    <tr>
     <td>
       <input type="checkbox" name="cheese" checked>Extra Cheese<br>
       <input type="checkbox" name="pepperoni">Pepperoni<br>
     </td>
   </tr>
  </table>
 <input type="button" value="Place Order" onClick="calculatePrice()">
</form>

Answer 1

Made a few small changes, but largely cosmetic -- firstly, note that I'm still storing the check and radio as variables, and accessing them. But when I use the radio, I simply use that to get the size, then (using its index) reference the price/size array to get the actual pizza price. Other than that, it's working exactly the same.

calculatePrice = function calculatePrice() {
  var resultmessage = "";
  var pizzamount = parseFloat(0);
  var radval;
  var radval2;
  var chckbox;
  var totalValue = parseInt(0);
  var priceTable = [
    {
      size: "18",
      price: 12.00
    }, {
      size: "15",
      price: 10.75
    }, {
      size: "10",
      price: 9.90
    }, {
      size: "8",
      price: 9.25
    }];
  var size = document.getElementsByName("size");
  var extras = document.getElementsByName("extras");
  
  // First, calculate the size. This is a radio, so
  //  we should only get one value.
  for (var i=0; i<size.length; i++) {
    if(size[i].checked){
    radVal = priceTable[i].size;
    totalValue += priceTable[i].price;
    }
  }
  // next, the extras. This may be multiple options
  for (var i=0; i<extras.length; i++) {
    if (extras[i].checked) {
      totalValue += (150/100);
    }
  }

  //radval = parseFloat(radval); 
  totalValue = parseFloat(totalValue);
  var resultmessage = "Total cost: $" + totalValue;
  document.getElementsByClassName("running-total")[0].innerHTML = resultmessage;

}

label {
  font-weight: bold;
  display: block;
}
form {
  width: 250px;
  border: 1px dotted green;
}

<form name="cost" autocomplete="on">
  <fieldset>
    <label for="size">Choose a Pizza Size:</label>
    <input type="radio" name="size" value="18" checked>Extra Large
    <input type="radio" name="size" value="15">Large
    <input type="radio" name="size" value="10">Medium
    <input type="radio" name="size" value="8">Small
  </fieldset>
  <fieldset>
    <label for="specials">Pizza Special:</label>

  </fieldset>
  <fieldset>
    <label for="extras">Extras:</label>
    <input type="checkbox" name="extras" value="cheese">Cheese
    <input type="checkbox" name="extras" value="pepperoni">Pepperoni
  </fieldset>
  <input type="button" onClick="calculatePrice()" value="Calculate Price!" /> <span class="running-total"></span>
</form>

Answer 2

Your html is incomplete. You don't have the specials or extras columns filled out, and you have some pizza sizes on there twice.

What you'll want to do is have things that you cannot have more than one of as a set of radio buttons (e.g. pizza sizes), and things you can have multiple of as a set of check boxes.

Then, you need to iterate through each checkbox and radio button to see if it's checked, and if it is, add it's value to the total.

It will also make it easier to work with if you add a border to the table and it's children.

I wasn't really able to make much sense of the code you had, so I hope that you find this helpful.