Question

JS很新，我已经有一段时间了。它几乎可行，问题在于最后几行。我想将x的当前值添加到运行总计中。 x应该只包含循环当前迭代的数量* unitCost。我认为这只是一个小的语法错误，但我能找到的每个例子似乎都使用与我相同的格式。

我在Chrome中遇到的控制台错误是“Uncaught TypeError：无法读取未定义的属性值”。

var starters = ["tom_soup", "summer_salad", "fondue", "flatbread", "ahi_tatar"];
var startersLength = starters.length;

function calcOrderVal() {
var total;
for (var i = 0; i < startersLength; i++) {

    var x

    // retrieve individual cost of dish
    var unitCost = parseFloat(document.getElementById(starters[i]).getAttribute("data-price"));
    console.log("Cost of the unit is " + unitCost);

    // retrieve user-entered quantity
    var quantity = document.getElementById(starters[i]).value;
    console.log("Quantity required: " + quantity);

    // Multiply the cost by the quantity
    x = unitCost * quantity;
    console.log("Cost of this: " + x);

    // Add to running total
    total += parseFloat(x[i].value);
    console.log("Grand total: " + total);

如果相关的话，这里也是我的HTML：

<h1>Pre-order form</h1>
            <div class="qty">Quantity</div>

            <form>
                <fieldset>
                    <legend>Order from any of our starters: </legend>

                <div class="item">
                    <label class="starter" for="tom_soup">Roasted Tomato Soup served with goat cheese croutons and basil puree.</label>
                    <input type="text" id="tom_soup" class="txt" name="quantity" size="5" data-price="2.0" onkeydown="r2t()" onchange="calcOrderVal()">
                    <span class="num-error">Must be a non-negative integer</span>
                </div>

                <div class="item">
                    <label class="starter" for="summer_salad">Summer Salad - organic butter lettuce with apples, blood oranges, and gorgonzola,
                        tossed with raspberry vinaigrette. </label>
                    <input type="text" id="summer_salad" class="txt" name="quantity" size="5" data-price="3.0" onkeydown="r2t()" onchange="calcOrderVal()">
                    <span class="num-error">Must be a non-negative integer</span>
                </div>

                <div class="item">
                    <label class="starter" for="fondue">Fondue of Brie, Goat Cheese, and Gruyere with green apples and garlic crostini.</label>
                    <input type="text" id="fondue" class="txt" name="quantity" size="5" data-price="5.0" onkeydown="r2t()" onchange="calcOrderVal()">
                    <span class="num-error">Must be a non-negative integer</span>
                </div>

                <div class="item">
                    <label class="starter" for="flatbread">Crispy Flatbread topped with asiago, prosciutto, and rocket. </label>
                    <input type="text" id="flatbread" class="txt" name="quantity" size="5" data-price="7.0" onkeydown="r2t()" onchange="calcOrderVal()">
                    <span class="num-error">Must be a non-negative integer</span>
                </div>

                <div class="item">
                    <label class="starter" for="ahi_tatar">Yellow-fin Ahi Tatar</label>
                    <input type="text" id="ahi_tatar" class="txt" name="quantity" size="5" data-price="11.0" onkeydown="r2t()" onchange="calcOrderVal()">
                    <span class="num-error">Must be a non-negative integer</span>
                </div>

                <div class="btn order">
                     <input type="submit" value="Order Now!" class="btn" name="subButton">&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="Reset" class="btn" name="resetButton">
                </div>

                </fieldset>
            </form>

Answer 1

x = unitCost * quantity;

所以x是一个数字，然后你：

parseFloat(x[i].value);

但x不是对象/数组，并且不包含Value属性的任何内容。

据推测，你只需要

total += x;

Answer 2

您需要在添加内容之前初始化总计。

尝试

var total = 0;

和

total += x;

基本Javascript - 尝试在For循环中实现运行总计

2 个答案: