Javascript Radio / Проблемы с флажками - PullRequest
Новая
       27

Javascript Radio / Проблемы с флажками

1 голос
/ 29 сентября 2011

У меня есть этот простой скрипт. Я пытаюсь получить проверенные значения и добавить их к итоговой сумме, которая находится в поле ввода diabled. Я знаю, что это проверенная опция, но она не обновляется в поле ввода, и я не знаю почему. Кто-нибудь может мне помочь? 

<html>
<head>
<script type="text/javascript">
    function updateForm()
    {
        var type = document.pizzaForm.pizzaType;
        var toppings = document.pizzaForm.toppings; 
        var pizzaType;
        var toppings;

        for(var i = 0; i <= type.length; i++)
        {
            if(type[i].checked)
            {
                total = type[i].value;
            }
        }

        for(var i = 0; i <= toppings.length; i++)
        {
            if(toppings[i].checked)
            {
                toppings += toppings[i].value;
            }
        }

        var total = pizzaType + toppings;

        pizzaForm.total.value = total;
    }
</script>
</head>
<body>
    <h1>Order Pizza Here:</h1>
    <form action="" method="get" name="pizzaForm">
        What Type of Pizza Would You Like? <br />
        <input type="radio" name="pizzaType" value="10.00" onchange="updateForm()" />Vegetarian<br />
        <input type="radio" name="pizzaType" value="20.00" onchange="updateForm()" />Meat Lovers<br />
            <br />
            <br />
        Extra Toppings: <br />
        <input type="checkbox" name="toppings" value="2.00" onchange="updateForm()" />Extra Cheese <br />
        <input type="checkbox" name="toppings" value="3.00" onchange="updateForm()" />Mushrooms <br />
        <input type="checkbox" name="toppings" value="4.00" onchange="updateForm()" />Anchovies <br />
            <br />
        Total <input type="text" disabled="disabled" name="total" />
    </form>
</body>
</html>

Ответы [ 2 ]

5 голосов
/ 29 сентября 2011

У вас есть несколько основных ошибок JavaScript:

  1. ваши циклы for выглядят так: 

    for(var i = 0; i <= type.length; i++)

    это означает, что они будут идти от 0 до длины (включая длину)) = длина + 1
    должно быть: 

    for(var i = 0; i < type.length; i++)

    видите разницу?<= сейчас <. (отключено из-за одной ошибки?)

  2. вы используете toppings переменную дважды. (javascript действительно плох в этом и позволяет вам выстрелить себе в ногу.) Также вы должны инициализировать все значения. 

    var type = document.pizzaForm.pizzaType;
var toppings = document.pizzaForm.toppings; 
var pizzaTypeValue = 0;
var toppingsValue = 0;

    Я также добавил Value кпеременные, которые содержат числа, а не элементы.Другие могут использовать префикс этого или другого такого соглашения, чтобы помнить, что оно содержит значение, а не список элементов.

  3. значения в разметке - это строки, использующие parseFloat( для преобразования их в числа с плавающей точкой: 

    pizzaTypeValue += parseFloat(type[i].value);

    также обратите внимание, что += означает: добавьте это ко мне.Эквивалентно pizzaTypeValue = pizzaTypeValue + ....

  4. . Нет необходимости в общей переменной.просто добавьте комментарий, если вы хотите запомнить, что это общая сумма.

См. jsFiddle: http://jsfiddle.net/F53ae/, чтобы увидеть его в действии.

1 голос
/ 29 сентября 2011

Вот рабочий код.Я положил это в jsfiddle для вас.Основная проблема заключалась в том, что у вас было две переменные с именем toppings.Кроме того, в первом цикле вы устанавливали переменную total, когда вы собирались установить другую сумму.Проверьте это.http://jsfiddle.net/eXPAj/1/

...