基本的Javascript - 試圖在For循環中實現一個運行總數

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

你需要添加一些它之前初始化總。

嘗試

var total = 0; 

而且

total += x; 

Answer 2

x = unitCost * quantity; 

所以x是一個數字，你再：

parseFloat(x[i].value); 

但x不是一個對象/數組和不包含任何與Value財產。

想必你只需要

total += x;