I'm trying to complete a system with which a book shop can enter the a sample of 5 books that were sold that day along with their prices. These values would then be displayed to the page. I have managed this and now wish to add the total price. I have tried all the methods mentioned on stack overflow and elsewhere to get the sume of the price array but I either get the last price entered or "NaN" when i try to get the total. Please help!!! Here is my code
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 This is my first time asking a question on here so if it's not structured very well then I apologise in advance and hope you can still make it all out
asked Feb 29, 2016 at 14:01
Eli Nathan
1,1412 gold badges16 silver badges38 bronze badges
3 Answers 3
try this:
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>
answered Feb 29, 2016 at 14:13
Alexandr Kudryashov
6313 silver badges16 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Eli Nathan
Thats perfect!! Thanks a lot!
Eli Nathan
Also, I would vote you up but I can't because Stack overflow knows i'm a noob!
It is because you are adding the entire HTML in the price array and hence it will not add as it is not numerical data.
This should work:
var input = parseInt(prompt("Enter the price"));
price.push(input);
Comments
please change
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(""));
to
// 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("");
answered Feb 29, 2016 at 14:09
Nina Scholz
388k26 gold badges367 silver badges417 bronze badges
Comments
lang-js
priceis an array of strings of HTML; you can't add them up.