Question

我想在javascript中创建一个函数，我检查是否正在检查广播，如果是，我将显示我在javascript中分配给HTML的成本。

以下是我的HTML和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>

另外，我想知道是使用onclick是否正确？提前m8s！

Answer 1

请记住，getElementsByName会返回一个集合，因此执行getElementsByName('Size').checked不正确访问列表getElementsByName('Size')[i].checked的元素是正确的

您分配功能的事件应该更改所有三个，不要像现在一样加载。

此外，如果您在程序中声明将始终使用price_dict且不会change的值，则应在函数外声明它。

如果您从onchange上的html传递项目

，您的代码可以大大减少

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>

Answer 2

您可以遍历元素并从字典中找到正确的价格。

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

下面给出的工作示例

对于onClick vs onChange：您应该使用onClick。您可以在此问题上阅读更多相关信息：What the difference between .click and .change on a checkbox

＆＃13;

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
  }

＆＃13;

<!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>

＆＃13;

不确定我的状况是否与正在检查的单选按钮相关

2 个答案: