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>

问题是我的网页没有显示“ 5号”的值。我尝试将第三个跨度ID更改为“大小3”，然后获取值。如果我将其更改回“ size 5”或“ size 4”，则不会再显示这些值。如果我从网页列表顶部的“ 5号”开始，则根本不显示任何值。如何使用跨度标签以任何可能的ID顺序在网页上显示价格？

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>