Javascript «Всего» окно не суммируется

0

Пожалуйста, помогите мне списать эту форму. Мне просто нужно "общее" поле для вычисления, когда кто-то нажимает на переключатели. Я получил часть ответа здесь из другого вопроса, и я попытался выполнить ответ, но он не работает. Мне явно не хватает чего-то другого, и мои знания о JS недостаточно продвинуты, чтобы понять это. Можете ли вы посмотреть мой код и рассказать мне, что мне не хватает или что-то не так? Спасибо. (Я прошу прощения за беспорядочное форматирование)

<html>
<head>
    <title> HTML and JavaScript </title>
    <script type="text/javascript">

    function towerPic()
    {}
    function doClear()
    {
        document.AddressForm.customer.value = "";
        document.AddressForm.address.value = "";
        document.AddressForm.city.value= "";
        document.AddressForm.state.value = "";
        document.AddressForm.zip.value = "";
        document.AddressForm.phone.value= "";
        document.AddressForm.email.value= "";
        document.AddressForm.total.value= "0.00";

        document.ComputerForm.cases[0].checked = false;
        document.ComputerForm.cases[1].checked = false;
        document.ComputerForm.cases[2].checked = false;

        document.ComputerForm.monitors[0].checked = false;
        document.ComputerForm.monitors[1].checked = false;
        document.ComputerForm.monitors[2].checked = false;

        document.ComputerForm.printers[0].checked = false;
        document.ComputerForm.printers[1].checked = false;
        document.ComputerForm.printers[2].checked = false;

        return;
    }

    var prices = new Object();
    function updateTotal () {
        var total = 0.00;
        for (var price in prices) {
            total += price;
        }
        document.getElementById("total").value = total;
    }
    </script>
</head>
<body>
<h1 align="center">Computer System Order Form</h1>
<table border="black" cellpadding="10px" align="center"> 
    <tr> 
        <td>
            <table cellpadding="10px">
            <form name="ComputerForm">
            <tr>
                <td>
                    Computer Case Style:</br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(500.00); updateTotal();"id="desktop" value="500.00" /> Desktop Case (500.00) </br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(600.00); updateTotal();"id="mini" value="600.00" /> Mini-Tower Case (600.00) </br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(700.00); updateTotal();" id="full" value="700.00" /> Full-Tower Case (700.00) </br>
                </td>
                <td>
                    <img src="case.jpg" width="125" height = "125" id="pcCase" > 
                </td>
            </tr>
            <tr>
                <td>
                    Computer Monitor: <br/>
                    <input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
                    <input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
                    <input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00)    </br>
                </td>
                <td>
                    <img src="monitor.jpg" width="125" height = "125" alt="pc monitor" />
                </td>
            </tr>
            <tr>
                <td>
                    Computer Printer:<br/>
                    <input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
                    <input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
                    <input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
                </td>
                <td>
                    <img src="printer.jpg" width="125" height = "125" alt="pc printer" />
                </td>
            </tr>
            </form>
            </table> 
        </td> 
        <td>
            <table padding="10px">
            <tr>
                <form name="AddressForm">
                <td>Total System Price:</td>
                <td>$<input type="text" name="total" readonly value="0.00" size="8"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Full Name:</td>
                <td><input type="text" name="customer" /></td>
            </tr>
            <tr>
                <td>Street Address:</td>
                <td><input type="text" name="address" /></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><input type="text" name="city" /></td>
            </tr>
            <tr>
                <td>State:</td>
                <td><input type="TEXT" name="state" size="2"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td><input type="text" name="zip" /></td>
            </tr>
            <tr>
                <td>Phone Number:</td>
                <td><input type="text" name="phone" /></td>
            </tr>
            <tr>
                <td>Email Address:</td>
                <td><input type="text" name="email"></td>
            </tr>
            </form>
            <tr>
                 <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Submit Order" onClick="doSubmit()" />
                </td>
                <td>
                    <input type="button" value="Clear Form" onClick="doClear()" />
                </td>
            </tr>
            </table> 
        </td> 
    </tr> 
</table>
</body> 
</html>
  • 1
    Похоже, вы ничего не добавляете к объекту prices ... В любом случае, ВСЕГДА работайте с целыми числами, особенно при работе с деньгами.
  • 0
    У вас также нет атрибута id установленного в поле «total».
Теги:

1 ответ

1

Вы должны использовать id вместо имени:

$<input type="text" name="total" id="total" readonly value="0.00" size="8">

Кроме того, вы можете сделать что-то подобное, чтобы заполнить массив prices:

<input type="radio" onchange="updateTotal(this.id, this.value)" id="desktop" value="500.00" /> Desktop Case (500.00) </br>

так что вы можете хранить и использовать эти значения в своем сценарии более легко и равномерно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню