issue with adding values from array

Question

I am writing a small application for the user to enter the name of a book and then its price, push the values of those to an array, output the book name and cost to the page and then display the total.

the issue I am having is with the total, for example:

If I write 2 as the value of each of the values, the "totalOutput" says 022222 instead of 10 as I would expect, I have tried a few different things and read a few articles on here but haven't found any to be much help or that useful.

these are the exact lines I am having issues with:

//go over each item in price and add up the total
        price.forEach(function addNumber(value) {
            total += value;
        });

//write the total
    totalOutput.innerHTML = "the total value of the books is " + total;
}

And incase you need it - here is my full javascript code:

//Book shop task
function trackBooks() {

    //target the output ul and store in a variable
    var output = document.getElementById("booksOutput");

    //Setup the two arrays to hold the book names and their prices.
    var books = [];
    var price = [];

    //declare a variable for working out the total
    var total = 0;

    //target the total output
    var totalOutput = document.getElementById("totalOutput");

    //set up a counter for the loop
    var x = 0;

    //setup the loop for entering the names of the books and their prices, for the sample, I have set the loop to run 5 times as stated in the pseudo code
    for (var i = 0; i < 5; i++) {

        //add one to the counter on each loop
        x = x + 1;

        //declare a variable to ask the user for the book name and the cost and push those values to their arrays we created above
        var bookName = prompt("enter book name number " + x);
        books.push(bookName);
        var bookPrice = prompt("how much does book number " + x + " cost?");
        price.push(bookPrice);

        //create a variable to create new li tags on output 
        var newLi = document.createElement("li");

        //add the required info to the new link
        newLi.innerHTML = "book " + x + ": " + "<strong>" + books[i] + "</strong>" + " costs " + "<strong>" + price[i] + "</strong>";

        //write out the name and price to the page
        output.appendChild(newLi);

    }

    //go over each item in price and add up the total
    price.forEach(function addNumber(value) {
        total += value;
    });

    //write the total
    totalOutput.innerHTML = "the total value of the books is " + total;
}

Looks like you need to convert your strings to numbers http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript — robobobobo, Feb 01 '15 at 17:59

score 0 · Accepted Answer · answered Feb 01 '15 at 17:57

0

    var bookPrice = prompt("how much does book number " + x + " cost?");
    price.push(bookPrice);

prompt returns a string, and when you add a number (0) and a string ("2"), you get a string ("02"). You should cast to number here:

price.push(+bookPrice);

(unary + casts to a number)

answered Feb 01 '15 at 17:57

Scimonster

32,893
9
77
89

works perfect now! thanks! I didn't know it was that simple, none of the articles I read said this either. Thanks man! – Feb 01 '15 at 18:12

score 0 · Answer 2 · answered Feb 01 '15 at 18:05

You are adding Strings not a Numbers. For example:

"Hello " + "World";

Will output "Hello World".

"10" + "20";

will output "1020"

Instead you have to convert the String to a Number

Number("10") + Number("20");

will ouput 30

To apply this to your code:

price.push(Number(bookPrice));

issue with adding values from array

2 Answers2