Question

我是一个相对较新的JS学生。不幸的是，我一直坚持这个问题，没有多少谷歌搜索帮助我解决这个问题。

我已经省略了大部分无关的HTML方面，但这是我的代码。基本上这是一个程序，它允许用户选择PC的组件并估计它的价格。

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

我现在的问题是该程序完美地工作没有 for循环，但是在我添加它之后，整个函数停止工作。

至于for循环具体做什么，它应该打印两个单独的阵列作为一个活跃的购物车＆＃39;。

我究竟对断开整个程序的for循环做了什么？

Answer 1

这是因为你在sList循环中声明了变量for，因此每次循环迭代都会创建新的sList并为其分配内容。试着这样做：

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];
    }

Answer 2

试试这个

注意：“$”和PriceCart [i]之间缺少 +

{{1}}

Answer 3

innerHTML正在寻找一个字符串，而您的代码似乎有一些范围问题。您可以使用.join(' ')从数组中构建字符串。

我重新安排了你的代码：

＆＃13;

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"})

＆＃13;

<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>

＆＃13;

用于循环中断功能

3 个答案: