why all products are displayed with the 'if' condition

[kat*]

Hi, I am building a basic shopping basket and the problem I find is that all the products, even with quantity of 0 are being displayed in the shopping basket. Please can anyone help!.. I don't know what I'm doing wrong. Thank you so much in advance!
This is my code:

function displayProducts(){
    var quant = new Array (10);

     quant[1] = Number(getInput("prodA"));
     quant[2] = Number(getInput("prodB"));
     quant[3] = Number(getInput("prodC"));
     quant[4] = Number(getInput("prodD"));
     quant[5] = Number(getInput("prodE"));
     quant[6] = Number(getInput("prodF"));
     quant[7] = Number(getInput("prodG"));
     quant[8] = Number(getInput("prodH"));
     quant[9] = Number(getInput("prodI"));
     quant[10] = Number(getInput("prodJ"));


var nameArray = new Array (name1, name2, name3, name4, name5, name6, name7, name8, name9, name10);  

var name1 = 'prodA';
var name2 = 'prodB';
var name3 = 'prodC';
var name4 = 'prodD';
var name5 = 'prodE';
var name6 = 'prodFi';
var name7 = 'prodG';
var name8 = 'prodH';
var name9 = 'prodI';
var name10 = 'prodJ';


for( var i=0; i<10; i++)
    {
        if (quant[i] > 0)
        {

    var product1 = quant[1] + ' ' + name1 + '</br>';
    var product2 = quant[2] + ' ' + name2 + '</br>';
    var product3 = quant[3] + ' ' + name3 + '</br>';
    var product4 = quant[4] + ' ' + name4 + '</br>';
    var product5 = quant[5] + ' ' + name5 + '</br>';
    var product6 = quant[6] + ' ' + name6 + '</br>';
    var product7 = quant[7] + ' ' + name7 + '</br>';
    var product8 = quant[8] + ' ' + name8 + '</br>';
    var product9 = quant[9] + ' ' + name9 + '</br>';
    var product10 = quant[10] + ' ' + name10 + '</br>';


        document.getElementById('shoppingBox').innerHTML = product1 + product2 + product3 + product4 + product5 + product6 + product7 + product8 + product9 + product10;    
        }
    }

}

You use a for loop but then don't reference 'i' but instead hand code 1 to 10. Why?

[kat*]

Could you please help me with correcting that? My idea is to loop through, I thought the reference was the quant[i], obviously that is not working well..

[Traevel]

Hi,

If I am understanding it correctly you only want the ordered products to show up in your shoppingBox. However, by hard coding all the products, names and print results referring to them will be cumbersome.

Firstly, your array quant misses the first element (0) and has an eleventh element (10) instead. This will cause your loops to fail at finding the first element because you start the iterator at 0 (which is correct).

So rewriting the first array as such will solve that issue, and fix the array so that there are no empty elements.

var quant = new Array (10);
    quant[0] = Number(getInput("prodA"));
    quant[1] = Number(getInput("prodB"));
    quant[2] = Number(getInput("prodC"));
    quant[3] = Number(getInput("prodD"));
    quant[4] = Number(getInput("prodE"));
    quant[5] = Number(getInput("prodF"));
    quant[6] = Number(getInput("prodG"));
    quant[7] = Number(getInput("prodH"));
    quant[8] = Number(getInput("prodI"));
    quant[9] = Number(getInput("prodJ"));

Secondly, your name array is unused and instead you added hardcoded names. So rewrite:

var nameArray = new Array (name1, name2, name3, name4, name5, name6, name7, name8, name9, name10);
var name1 = 'prodA';
var name2 = 'prodB';
var name3 = 'prodC';
var name4 = 'prodD';
var name5 = 'prodE';
var name6 = 'prodFi';
var name7 = 'prodG';
var name8 = 'prodH';
var name9 = 'prodI';
var name10 = 'prodJ';

To:

var nameArray = new Array ('prodA', 'prodB', 'prodC', 'prodD', 'prodE', 'prodF', 'prodG', 'prodH', 'prodI', 'prodJ');

The for loop is correct, but you could rewrite it to a for ... in ... loop. That way you won't have to change the code if you decide to change the amount of products later on.

for (i in quant){
    if(quant[i] > 0){
        document.getElementById('shoppingBox').innerHTML += quant[i] + ' ' + nameArray[i] + '<br>';
    }
}

For more flexibility you could change the printing statement and place the string in a variable like you did with product1 etc. However, append the information to the same variable instead of creating a new variable for each line; if you're not using objects or arrays to store the information. So:

product += quant[i] + ' ' + nameArray[i] + '<br>';

So to sum up you would probably want something like:

var quant = new Array (10);
    quant[0] = Number(getInput("prodA"));
    quant[1] = Number(getInput("prodB"));
    quant[2] = Number(getInput("prodC"));
    quant[3] = Number(getInput("prodD"));
    quant[4] = Number(getInput("prodE"));
    quant[5] = Number(getInput("prodF"));
    quant[6] = Number(getInput("prodG"));
    quant[7] = Number(getInput("prodH"));
    quant[8] = Number(getInput("prodI"));
    quant[9] = Number(getInput("prodJ"));

var nameArray = new Array ('prodA', 'prodB', 'prodC', 'prodD', 'prodE', 'prodF', 'prodG', 'prodH', 'prodI', 'prodJ');

    for (i in quant){
        if(quant[i] > 0){
            document.getElementById('shoppingBox').innerHTML += quant[i] + ' ' + nameArray[i] + '<br>';
        }
    }

Assuming your Number() and getInput() functions are correct that should produce the result you wanted.

Hope it helps,

Traevel

[kat*]

Thank you so so so much! I have really tried very hard to do it! Thank you especially for the For loop, it's brilliant!