我正在尝试完成一个系统，书店可以使用该系统输入当天售出的 5 本书的样本及其价格。然后这些值将显示到页面上。 我已经做到了这一点，现在希望添加总价。我已经尝试了堆栈溢出和其他地方提到的所有方法来获取价格数组的总和，但是当我尝试获取总计时，我要么得到最后输入的价格，要么得到“NaN”。请帮忙!!! 这是我的代码
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>P.S 这是我第一次在这里提问，所以如果结构不是很好，那么我提前道歉，希望你仍然能弄清楚
最佳答案
试试这个:
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>关于javascript - 添加 JavaScript 数组的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35701532/