添加javascript數組的值

我試圖完成一個系統，一家書店可以輸入當天銷售的5本書樣本以及它們的價格。這些值將顯示在頁面上。我已經管理這個，現在希望增加總價。我已經嘗試了所有在堆棧溢出和其他地方提到的方法來獲得價格數組的價值，但是我得到最後輸入的價格或「NaN」，當我嘗試獲得總價。請幫忙！！！這裏是我的代碼添加javascript數組的值

document.addEventListener("DOMContentLoaded", function() { 
 
    enterBooks() 
 
}); // Event listener - When page loads, call enterBooks function 
 

 
function enterBooks() { // enterBooks function 
 
    
 
    var books = []; // Defines books variable as an array 
 
    
 
    for (var i = 0; i < 5; i++) { // for loop to loop 5 times 
 
    
 
    books.push("<li>" + prompt("Enter a book") + "</li>"); // PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. 
 

 
    var price = []; // Defines price variable as an array 
 
    
 
    for (var p = 0; p < 1; p++) { // for loop to loop 1 time 
 
     
 
     price.push("<li>" + "£" + parseInt(prompt("Enter the price")) + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book. 
 

 
    } 
 
    document.getElementById("displayPrice").innerHTML += (price.join("")); 
 
    document.getElementById("displayBooks").innerHTML = (books.join("")); 
 
    } 
 
    // --------- This is the part i cannot seem to get ----------- 
 
    var total = 0; 
 

 
    for (var t = 0; t < price.length; t++) { 
 
    total = total + price[t]; 
 
    } 
 
    document.getElementById("total").innerHTML = total; 
 
}

ul { 
 
    list-style-type: decimal; /* Gives list items numbers */ 
 
    font-size:25px; 
 
    width:20%; 
 
} 
 
#displayBooks { 
 
    float:left; 
 
    width:20%; 
 
} 
 
#displayPrice { 
 
    float:left; 
 
    width:50%; 
 
    list-style-type: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Bookshop</title> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <!-- StyleSheet --> 
 
</head> 
 

 

 
<body class="text-center"> 
 
    <h1>BookShop</h1> 
 
    <!-- Header --> 
 
    <h3>Books sold</h3> 
 
    <!-- Team intro --> 
 
    <ul id="displayBooks"> 
 
    <!-- Div to display the teams --> 
 

 
    </ul> 
 
    <ul id="displayPrice"> 
 
    <!-- Div to display the teams --> 
 

 
    </ul> 
 
    <div id="total"> 
 

 
    </div> 
 

 
    <script src="js/script.js"></script> 
 
</body> 
 

 
</html>

PS這是我第一次問在這裏的一個問題，所以如果它不是結構非常好，然後我提前道歉，希望你仍然可以讓這一切了

來源

2016-02-29 E.Nathan

'price'是一串HTML數組;你不能添加它們。 – 2016-02-29 14:05:40

試試這個：

document.addEventListener("DOMContentLoaded", function() { 
 
    enterBooks() 
 
}); // Event listener - When page loads, call enterBooks function 
 

 
function enterBooks() { // enterBooks function 
 
    
 
    var books = []; // Defines books variable as an array 
 
    var price = []; 
 
    var priceText=[]; 
 
    for (var i = 0; i < 5; i++) { // for loop to loop 5 times 
 
    
 
    books.push("<li>" + prompt("Enter a book") + "</li>"); // PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. 
 
     price[i]=parseInt(prompt("Enter the price")); 
 
     priceText.push("<li>" + "£" + price[i] + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book. 
 

 
    
 
    document.getElementById("displayPrice").innerHTML = priceText.join(""); 
 
    document.getElementById("displayBooks").innerHTML = (books.join("")); 
 
    } 
 
    // --------- This is the part i cannot seem to get ----------- 
 
    var total = 0; 
 

 
    for (var t = 0; t < price.length; t++) { 
 
    total = total + price[t]; 
 
    } 
 
    document.getElementById("total").innerHTML = total+ "£"; 
 
}

ul { 
 
    list-style-type: decimal; /* Gives list items numbers */ 
 
    font-size:25px; 
 
    width:20%; 
 
} 
 
#displayBooks { 
 
    float:left; 
 
    width:20%; 
 
} 
 
#displayPrice { 
 
    float:left; 
 
    width:50%; 
 
    list-style-type: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Bookshop</title> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
    <!-- StyleSheet --> 
 
</head> 
 

 

 
<body class="text-center"> 
 
    <h1>BookShop</h1> 
 
    <!-- Header --> 
 
    <h3>Books sold</h3> 
 
    <!-- Team intro --> 
 
    <ul id="displayBooks"> 
 
    <!-- Div to display the teams --> 
 

 
    </ul> 
 
    <ul id="displayPrice"> 
 
    <!-- Div to display the teams --> 
 

 
    </ul> 
 
    <div id="total"> 
 

 
    </div> 
 

 
    <script src="js/script.js"></script> 
 
</body> 
 

 
</html>

來源

2016-02-29 14:13:08

完美！非常感謝！ –

另外，我會投你一票，但我不能，因爲堆棧溢出知道我是一個noob！ –

這是因爲您要在價格數組中添加整個HTML，因此它不會添加，因爲它不是數字數據。

這應該工作：

var input = parseInt(prompt("Enter the price")); 
price.push(input);

來源

2016-02-29 14:06:56 Jagrut

請更改

for (var p = 0; p < 1; p++) { // for loop to loop 1 time 
    price.push("<li>" + "£" + parseInt(prompt("Enter the price")) + "</li>"); // Once again PUSH adds a new item to the array in the form of a prompt with <li> tags either side of each. This then displays next to each book. 
} 
document.getElementById("displayPrice").innerHTML += (price.join(""));

到

// no need for loop 
price.push(parseInt(prompt("Enter the price"), 10)); // just the price, added base to parseInt (really? not parseFloat?) 
document.getElementById("displayPrice").innerHTML += price.map(function (a) { 
    return '<li>GBP' + a + '</li>'; // build here the string for output 
}).join("");

來源

2016-02-29 14:09:24

添加javascript數組的值

回答

相關問題