For loop breaking function

Question

I'm a student who is relatively fairly new to JS. Unfortunately I'm quite stuck on this issue, and no amount of googling has helped me regarding this.

I've omitted most of the irrelevant HTML side of things, however this is my code. Essentially this is a program which can allow a user to choose components for a PC and estimate a price for it.

var tPrice = 0

function Pick(obj) {
  Comp = ["p3", "p5", "p7", "16GB", "32GB", "1TB", "2TB", "19", "23", "MNT", "MDT", "2P", "4P"];
  Price = [100, 120, 200, 75, 150, 50, 100, 65, 120, 40, 70, 10, 20];
  Cart = [];
  PriceCart = [];

  var value = obj.value;

  var cIndex = Comp.indexOf(value);
  var cPrice = Price[cIndex];

  tPrice = (tPrice + cPrice);

  document.getElementById("dtPrice").innerHTML = ("$" + tPrice);

  Cart.push(value);
  PriceCart.push(cPrice);

  for (var i = 0; i < Comp.length; i++) {
    var sList = Cart[i] + "   $"
    PriceCart[i];
  }
  document.getElementById("dsList").innerHTML = sList;

}

<div class="sidebar">
  <h3>Shopping Cart :</h3>
  <p id="dsList">You have bought nothing!</p>

  <h3>Total Price</h3>
  <p id="dtPrice">$0</p>
</div>

My issue as of now is that the program perfectly works without the for loop, however after I add it in, the entire function stops working.

As for what the for loop specifically does, it is supposed to print two separate arrays together as an active 'shopping cart'.

What exactly have I done with the for loop that breaks the entire program?

You should check the console for errors and report them to us when asking questions like this one. — takendarkk
– takendarkk, Commented Apr 5, 2018 at 21:23
Keep your browser's developer console open because that's where errors like that would be reported. — Pointy
– Pointy, Commented Apr 5, 2018 at 21:23
Use your debugger! It will point you to errors, or use a linter that will also point out syntax errors., and I am not sure that loop is doing what you want. — epascarello
– epascarello, Commented Apr 5, 2018 at 21:23
Also, each time through the loop you assign to that variable sList, overwriting the work of the previous iteration. — Pointy
– Pointy, Commented Apr 5, 2018 at 21:24

Max · Accepted Answer · 2018-04-05 21:37:08Z

1

Thats because you declaring variable sList inside your for loop, so each time loop iterates you are creating new sList and assigning something to it. Try doing this:

var sList = '';//string another array, w/e you need it to be
 for (var i = 0; i < Comp.length; i++) {
        sList += Cart[i] + "   $" + PriceCart[i];
    }

edited Apr 5, 2018 at 21:37

answered Apr 5, 2018 at 21:28

Max

9905 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SoEzPz · Accepted Answer · 2018-04-05 21:32:50Z

0

Try this

Note: There is a missing + between " $" and PriceCart[i]

var sList = Cart[i] + "   $" + PriceCart[i];

answered Apr 5, 2018 at 21:32

SoEzPz

16k8 gold badges64 silver badges67 bronze badges

Comments

FisNaN · Accepted Answer · 2018-04-05 21:43:23Z

innerHTML is looking for a string, and your code seems to has some scoping issues. You can use .join(' ') to build a string out from array.

I rearranged your code:

const comp = ["p3", "p5", "p7", "16GB", "32GB", "1TB", "2TB", "19", "23", "MNT", "MDT", "2P", "4P"];
const price = [100, 120, 200, 75, 150, 50, 100, 65, 120, 40, 70, 10, 20];
let tPrice = 0
const cart = [];
const priceCart = [];

function Pick(obj) {
  const value = obj.value;
  const cIndex = comp.indexOf(value);
  const cPrice = price[cIndex];

  tPrice += cPrice;

  document.getElementById("dtPrice").innerHTML = ("$" + tPrice);

  cart.push(value);
  priceCart.push(cPrice);
  
  const list = cart.map((item, idx) => `${item}: $${priceCart[idx]}`).join(', ');

  document.getElementById("dsList").innerHTML = list;
}

Pick({value: "p5"})
Pick({value: "1TB"})
Pick({value: "23"})

<div class="sidebar">
  <h3>Shopping Cart :</h3>
  <p id="dsList">You have bought nothing!</p>

  <h3>Total Price</h3>
  <p id="dtPrice">$0</p>
</div>

Collectives™ on Stack Overflow

For loop breaking function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related