Javascript数组id显示顺序

Question

我制作了一个简单的 javascript 价格数组，我想通过 ID 属性在我的网站上使用它们。

var taxrate = 1.21

sp([
1.39, // size 1
1.11, // size 2
2.08, // size 3
2.09, // size 4
1.22 // size 5
]);

function sp(price) {
 
  var i;

  for (i = 0; i < price.length; i++) {
    var id = "sp" + (i + 1);
    document.getElementById(id).innerHTML = price[i];
 
 var idtax = "sp" + (i + 1) + "tax";
 
 var subtotal = (price[i] * taxrate)
 
 var total = Math.round(subtotal*100)/100;
 
 document.getElementById(idtax).innerHTML = total;
  }
  }

<span id="sp1"></span> <!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span> <!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span> <!-- size 5 -->
<span id="sp5tax"></span>

问题是我的网页不显示 "size 5" 的值。我试图将第三个 span id 更改为 "size 3" 然后我得到了值。如果我将其改回 "size 5" 或 "size 4"，则这些值不会再次显示。如果我从网页列表顶部的 "size 5" 开始，它根本不会显示任何值。如何使用任何可能的 ID 序列中的 span 标签在我的网页上显示价格？

Answer 1

只需添加一个简单的if条件来检查是否在文档中找到具有Id的元素，并在此基础上进一步处理

var taxrate = 1.21

sp([
  1.39, // size 1
  1.11, // size 2
  2.08, // size 3
  2.09, // size 4
  1.22 // size 5
]);

function sp(price) {
  for (let i = 0; i < price.length; i++) {
    var id = "sp" + (i + 1);
    let elementId = document.getElementById(id)
    let idtax = "sp" + (i + 1) + "tax";
    let elementTaxId = document.getElementById(idtax)
    if (elementId && elementTaxId) {
      elementId.innerHTML = price[i];

      var subtotal = (price[i] * taxrate)

      var total = Math.round(subtotal * 100) / 100;

      elementTaxId.innerHTML = total;
    }
  }
}

<span id="sp1"></span>
<!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span>
<!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span>
<!-- size 5 -->
<span id="sp5tax"></span>

Answer 2

您需要检查 DOM 中是否存在带有 id 的 span，然后对其应用 innerHTML。

var taxrate = 1.21

sp([
1.39, // size 1
1.11, // size 2
2.08, // size 3
2.09, // size 4
1.22 // size 5
]);

function sp(price) {
 
  var i;

  for (i = 0; i < price.length; i++) {
    var id = "sp" + (i + 1);
    let span = document.getElementById(id); // store the element reference in a variable
    if(span) { // check if element with id exists in DOM
       span.innerHTML = price[i]; // set the html using the variable
 
       var idtax = "sp" + (i + 1) + "tax";

       var subtotal = (price[i] * taxrate)
 
       var total = Math.round(subtotal*100)/100;
 
       document.getElementById(idtax).innerHTML = total;
      }
  }
}

<span id="sp1"></span> <!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span> <!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span> <!-- size 5 -->
<span id="sp5tax"></span>

Answer 3

var taxrate = 1.21

sp([
  1.39, // size 1
  1.11, // size 2
  2.08, // size 3
  2.09, // size 4
  1.22 // size 5
]);

function sp(price) {
 
  var i;

  for (i = 0; i < price.length; i++) {

    var id = "sp" + (i + 1);

    var span = document.getElementById(id);
    console.log("span "+id, span);

    if(span) { // check if element with id exists in DOM
      span.textContent = price[i];

      var taxSpan = document.getElementById(id + "tax");
      console.log("taxSpan "+id, taxSpan);

      if(taxSpan) {
        var subtotal = (price[i] * taxrate);
        var total = Math.round(subtotal*100)/100;
        taxSpan.textContent = total;
      }
    }
  }
}

<span id="sp1"></span> <!-- size 1 -->
<span id="sp1tax"></span>
<span id="sp2"></span> <!-- size 2 -->
<span id="sp2tax"></span>
<span id="sp5"></span> <!-- size 5 -->
<span id="sp5tax"></span>

Javascript数组id显示顺序

Javascript array id display sequence

html

javascript

arrays

sequence

getelementbyid