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”，然后获取值。如果我将其改回“尺寸 5”或“尺寸 4”，这些值将不会再次显示。如果我从网页列表顶部的“尺寸 5”开始，则根本不会显示任何值。如何使用任何可能的 ID 序列中的跨度标签在我的网页上显示价格？

Answer 1

您需要检查 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>