Not sure if my condition correlates to radio button being checked

Question

I want to create a function in javascript whereby I check whether is the radio is being checked if so I will display the cost that is I assign in javascript itself to HTML.

The following is my HTML and javascript:

function priceCalculator(){
  var price_dict = {
    "Small":22, "Medium":28, "Large":35,

  }

  var length = Object.keys(price_dict).length;

  for(var i=0;i<length;i++){
    var dis = document.getElementsByName('Size')[i].value;
    if(document.getElementsByName('Size').checked){

      document.getElementById("DisplayPrice").innerHTML = price_dict[dis];

    }

    }

  }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Pizza Order Form</title>

    <style>
        form {
            font-family: Arial, Helvetica, sans-serif;
            vertical-align: central;
            border: 5px solid black;
            margin:0px auto;
            width:650px;
            padding-left:0.5em;
        }
        fieldset{
            width:600px;
            box-sizing:border-box;
            border-radius: 20px;
        }

        .deliver > p > label {
            width: 70px;
            display: inline-block;
        }

        .deliver > p > input {
            width: 130px;
            display: inline-block;
        }

        #DisplayPrice{
            background-color: yellow;
        }

    </style>
</head>

<body >
    <form>
        <h1>Pizza order Form</h1>
        <p>
            <label for="Pizza Type">Pizza Type:</label>
            <select name="pizza type">
                <option value="Please select" selected>Please select...</option>
                <option value="Aloha Chicken">Aloha Chicken</option>
                <option value="Beef Pepperoni">Beef Pepperoni</option>
                <option value="Chicken Delight">Chicken Delight</option>
                <option value="Deluxe Cheese">Deluxe Cheese</option>
            </select>

            <label for="Quantity">Quantity</label>
            <input name="quantity" type="number" min="1" max="4" />
        </p>

        <!--Size-->
        <fieldset >
            <legend>Size:</legend>
            <input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
            <input type="radio" name="Size" value="Medium" onchange="priceCalculator()"/>Medium
            <input type="radio" name="Size" value="Large" onload="priceCalculator()"/>Large
        </fieldset>

        <!--Crust-->
        <fieldset>
            <legend>Crust:</legend>
            <input type="radio" name="Crust"value="Thin" />Thin
            <input type="radio" name="Crust" value="Thick" />Thick
            <input type="radio" name="Crust" value="Deep Dish" />Deep Dish
        </fieldset>

        <!--Toppings-->
        <fieldset>
            <legend>Toppings:</legend>
            <input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
            <input type="radio" name="Toppings" value="Sausage" />Sausage
            <input type="radio" name="Toppings" value="Olives" />Olives
        </fieldset>

        <!--Addons-->
        <p>
            <label for="Addons">Addons</label>
            <select name="Addons" multiple>
                <option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
                <option value="Garlic Bread">Garlic Bread</option>
            </select>
        </p>

        <div id="DisplayPrice"></div>



        <!--Delivery section-->
        <fieldset class="deliver">
            <legend>Deliver to:</legend>
            <p>
                <label for="Name">Name:</label>
                <input type="text" name="name" required/>
            </p>
            <p>
                <label for="Address">Address:</label>
                <textarea rows="2" cols="30" required></textarea>
                <label for="Postal Code">Postal Code:</label>
                <input type="text" name="Postal Code" maxlength="6" required/>
            </p>
            <p>
                <label for="Phone Number">Phone#: </label>
                <input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
            </p>
            <p>
                <label for="email">Email:</label>
                <input type="email" form="email" required />
            </p>
            <p>
                <label for=" Date">Date:</label>
                <input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
                <label for="time">Time: </label>
                <input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
            </p>
        </fieldset>
        <p>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </p>

    </form>

    <script src="pizzaScript.js"></script>

</body>
</html>

Also, I would like to know is the use of onclick is correct? Thx in advance m8s!

score 0 · Answer 1 · answered Dec 09 '17 at 02:18

remember that getElementsByName returns a collection therefore it is not correct to do a getElementsByName('Size').checked it would be correct to access an element of a list getElementsByName('Size')[i].checked

Your event where you assign the function should change for all three, do not load as you have right now.

Also, if you declare values that will always be used price_dict and will not change in your program, you should declare it outside the function.

Your code can be greatly reduced if you pass the item from the html on the onchange

var price_dict = {
  "Small":22, "Medium":28, "Large":35,
}

function priceCalculator(elm){
  document.getElementById("DisplayPrice").innerHTML = price_dict[elm.value];
}

<fieldset >
  <legend>Size:</legend>
  <input type="radio" name="Size" value="Small" onchange="priceCalculator(this)" />Small
  <input type="radio" name="Size" value="Medium" onchange="priceCalculator(this)"/>Medium
  <input type="radio" name="Size" value="Large" onchange="priceCalculator(this)"/>Large
</fieldset>

<div id="DisplayPrice"></div>

score 0 · Answer 2 · answered Dec 09 '17 at 02:23

You can loop through the elements and find the correct price from the dictionary.

var sizeElements = Array.from(document.getElementsByName('Size'));
      var value = sizeElements.length && sizeElements.find(r => r.checked).value;

Working example given below

For the onClick vs onChange: You should probably use onClick. You can read more about it at this question: What the difference between .click and .change on a checkbox

function priceCalculator(){
  var price_dict = {
    "Small":22, "Medium":28, "Large":35,

  }

  var sizeElements = Array.from(document.getElementsByName('Size'));
  var value = sizeElements.length && sizeElements.find(r => r.checked).value;
  

  return price_dict[value] // use returned price elsewhere
  }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Pizza Order Form</title>

    <style>
        form {
            font-family: Arial, Helvetica, sans-serif;
            vertical-align: central;
            border: 5px solid black;
            margin:0px auto;
            width:650px;
            padding-left:0.5em;
        }
        fieldset{
            width:600px;
            box-sizing:border-box;
            border-radius: 20px;
        }

        .deliver > p > label {
            width: 70px;
            display: inline-block;
        }

        .deliver > p > input {
            width: 130px;
            display: inline-block;
        }

        #DisplayPrice{
            background-color: yellow;
        }

    </style>
</head>

<body >
    <form>
        <h1>Pizza order Form</h1>
        <p>
            <label for="Pizza Type">Pizza Type:</label>
            <select name="pizza type">
                <option value="Please select" selected>Please select...</option>
                <option value="Aloha Chicken">Aloha Chicken</option>
                <option value="Beef Pepperoni">Beef Pepperoni</option>
                <option value="Chicken Delight">Chicken Delight</option>
                <option value="Deluxe Cheese">Deluxe Cheese</option>
            </select>

            <label for="Quantity">Quantity</label>
            <input name="quantity" type="number" min="1" max="4" />
        </p>

        <!--Size-->
        <fieldset >
            <legend>Size:</legend>
            <input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
            <input type="radio" name="Size" value="Medium" onclick="priceCalculator()"/>Medium
            <input type="radio" name="Size" value="Large" onclick="priceCalculator()"/>Large
        </fieldset>

        <!--Crust-->
        <fieldset>
            <legend>Crust:</legend>
            <input type="radio" name="Crust"value="Thin" />Thin
            <input type="radio" name="Crust" value="Thick" />Thick
            <input type="radio" name="Crust" value="Deep Dish" />Deep Dish
        </fieldset>

        <!--Toppings-->
        <fieldset>
            <legend>Toppings:</legend>
            <input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
            <input type="radio" name="Toppings" value="Sausage" />Sausage
            <input type="radio" name="Toppings" value="Olives" />Olives
        </fieldset>

        <!--Addons-->
        <p>
            <label for="Addons">Addons</label>
            <select name="Addons" multiple>
                <option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
                <option value="Garlic Bread">Garlic Bread</option>
            </select>
        </p>

        <div id="DisplayPrice"></div>



        <!--Delivery section-->
        <fieldset class="deliver">
            <legend>Deliver to:</legend>
            <p>
                <label for="Name">Name:</label>
                <input type="text" name="name" required/>
            </p>
            <p>
                <label for="Address">Address:</label>
                <textarea rows="2" cols="30" required></textarea>
                <label for="Postal Code">Postal Code:</label>
                <input type="text" name="Postal Code" maxlength="6" required/>
            </p>
            <p>
                <label for="Phone Number">Phone#: </label>
                <input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
            </p>
            <p>
                <label for="email">Email:</label>
                <input type="email" form="email" required />
            </p>
            <p>
                <label for=" Date">Date:</label>
                <input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
                <label for="time">Time: </label>
                <input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
            </p>
        </fieldset>
        <p>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </p>

    </form>

    <script src="pizzaScript.js"></script>

</body>
</html>

Not sure if my condition correlates to radio button being checked

2 Answers2