CODEWITHSUNDEEP
javascript
user2061212
user2061212

Reputation:

Calculate Array values using For-In Loop

I have the following Javascript. I am trying to calculate the total of the myCosts array values using the 'for in; loop and then display them on the page. I think i am nearly there.

function enterFood() 
{ 
    var myFoods = new Array() 
    var myCosts = new Array() 

    for (i = 1; i <= 5; i++) 
    { 
        myFoods[i] = prompt("Enter name of Food",""); 
        myCosts[i] = parseFloat(prompt("Enter cost of food","")); 
        document.getElementById("cost").innerHTML += i + ". " + myFoods[i] + ". Cost: £" + myCosts[i] + "<br />"; 
    } 

    for (var i in myCosts) 
    { 
        document.getElementById("total_cost").innerHTML =+ i; 
    } 
}

Can anybody offer any help so I can complete this?

Upvotes: 1

Views: 2628

Answers (2)

Craig Taub
Craig Taub

Reputation: 4179

You're missing a var keyword before the i in the for loop. Without it i will become a global variable. Also, using the array literal notation ([]) is shorter/faster/cleaner than writing new Array(), like so: myArray = []; Just a general tip... Also note that for (var ... in ...) is used to iterate through the members of an object and generally not to loop through an array.

If you're not using the values in the myBooks and myPrices arrays later in your script then you don't need any arrays here - you can just combine your two loops and save the values returned from the prompts in temporary variables inside the loop. See below:

function enterFood()
{
    var total_cost = 0;
    for (var i = 1; i <= 5; i++)
    { 
        var name = prompt("Enter name of Food","");
        var cost = parseFloat(prompt("Enter cost of food","")); 
        document.getElementById("cost").innerHTML += i + ". " + name + ". Cost: £" + cost + "<br />";
        total_cost += cost;
    }
    document.getElementById("total_cost").innerHTML = total_cost;
}

Additionally just looking at your code have a few comments:

1) Missing var keyword before the i inside the for loop. Without it i will become a GLOBAL variable.

2) In Javascript an array is an object, it has various properties that are functions. Using the array literal notation (i.e. [] ) is cleaner/shorter and faster than writing new Array..for example myArray = []

3) The For-In loop is used to iterate through the members of an object and generally NOT to loop through an array. For-In loops are slower than normal loops. You want to use a regular loop for iterating over an array.

4) If you are not using the values in the myBooks and myPrices arrays later on in your script then you do not need any arrays here, you could just combine your 2 loops and save the values returned from the prompts inside temporary variables inside the loop.

EDIT: As corrected by @Teemu, i is hoisted from for..in loop so will not become global.

Upvotes: 2

VisioN
VisioN

Reputation: 145478

You should iterate array correctly:

var totalElement = document.getElementById("total_cost"),
    total_cost = parseFloat(totalElement.innerHTML);

for (var i = 0, len < myCosts.length; i < len; i++) {
    total_cost += myCosts[i];
}

totalElement.innerHTML = total_cost;

Upvotes: 2

Related Questions