以这种方式放置 getElementById 后，排序功能无法按预期工作

Question

我是一个初学者，正在研究我自己的第一个项目，但我无法获得有关此案例的信息。

该应用程序支持os接收有关产品的数据，包括名称、价格、库存、销售数量，然后将它们从售出的 most 排序到售出的较少.

事情是这样的，我试图通过以另一种方式放置这个块来缩短代码的动词ose

所以我从这个开始

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => {
    return (a.amountSold < b.amountSold) ? 1 : -1
  });

  document.getElementById("name1").innerHTML = diseños[0].designName;
  document.getElementById("stock1").innerHTML = diseños[0].currentStock;
  document.getElementById("price1").innerHTML = "$" + diseños[0].priceEa;
  document.getElementById("sold1").innerHTML = diseños[0].amountSold;
  document.getElementById("lastProduction1").innerHTML = diseños[0].productionAmount;

  document.getElementById("name2").innerHTML = diseños[1].designName;
  document.getElementById("stock2").innerHTML = diseños[1].currentStock;
  document.getElementById("price2").innerHTML = "$" + diseños[1].priceEa;
  document.getElementById("sold2").innerHTML = diseños[1].amountSold;
  document.getElementById("lastProduction2").innerHTML = diseños[1].productionAmount;

  document.getElementById("name3").innerHTML = diseños[2].designName;
  document.getElementById("stock3").innerHTML = diseños[2].currentStock;
  document.getElementById("price3").innerHTML = "$" + diseños[2].priceEa;
  document.getElementById("sold3").innerHTML = diseños[2].amountSold;
  document.getElementById("lastProduction3").innerHTML = diseños[2].productionAmount;

}

至此

var index = 0;

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => {
    return (a.amountSold > b.amountSold) ? 1 : -1
  });


  index++;
  var prefixName = "name";
  var prefixStock = "stock";
  var prefixPrice = "price";
  var prefixSold = "sold";
  var prefixLastProd = "lastProduction";

  document.getElementById(prefixName + index).innerHTML = diseños[index - 1].designName;
  document.getElementById(prefixStock + index).innerHTML = diseños[index - 1].currentStock;
  document.getElementById(prefixPrice + index).innerHTML = diseños[index - 1].priceEa;
  document.getElementById(prefixSold + index).innerHTML = diseños[index - 1].amountSold;
  document.getElementById(prefixLastProd + index).innerHTML = diseños[index - 1].productionAmount;

}

除排序功能外，一切正常，排序功能在第一个硬编码版本中工作正常，但在第二个硬编码版本中根本不工作。

Pd: "diseños" 是一个数组，它通过这个函数在每个索引中保存一个对象（"diseño" 没有 s）

let diseños = [];
const addDesign = (ev) => {
    ev.preventDefault();
    let diseño = {
      designName: document.getElementById("textBox1").value,
      currentStock: document.getElementById("textBox2").value,
      productionAmount: document.getElementById("textBox3").value,
      priceEa: document.getElementById("textBox4").value,
      amountSold: document.getElementById("textBox5").value

    }
    diseños.push(diseño);
    document.forms[0].reset();

你们能帮我解决这个问题吗？

Answer 1

创建一个具有您需要的所有属性的对象，然后运行每次您想要对对象数组进行排序时都使用此方法

var balanceVenta = diseños.OrderByDescending(x =>x.amountSold).ToList()

Answer 2

你很亲密；你只需要将代码放在 diseños 的循环中。我还稍微简化了排序逻辑，假设 amountSold 是一个数字。交换 a.amountSold 和 b.amountSold 的位置以将升序更改为降序。

var balanceVenta = (ev) => {
  ev.preventDefault();

  diseños.sort((a, b) => a.amountSold - b.amountSold);

  var prefixName = "name";
  var prefixStock = "stock";
  var prefixPrice = "price";
  var prefixSold = "sold";
  var prefixLastProd = "lastProduction";

  for (var index = 0; index < diseños.length; index++) {
    var suffix = index + 1;
    document.getElementById(prefixName + suffix).innerHTML = diseños[index].designName;
    document.getElementById(prefixStock + suffix).innerHTML = diseños[index].currentStock;
    document.getElementById(prefixPrice + suffix).innerHTML = diseños[index].priceEa;
    document.getElementById(prefixSold + suffix).innerHTML = diseños[index].amountSold;
    document.getElementById(prefixLastProd + suffix).innerHTML = diseños[index].productionAmount;
  }

}

以这种方式放置 getElementById 后，排序功能无法按预期工作

Sort function not working as expected after putting getElementById this way

javascript

arrays

sorting

if-statement

getelementbyid