添加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数组的值

回答

相关问题