Javascript последовательность отображения идентификатора массива

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". Я попытался изменить третий идентификатор диапазона на «размер 3», а затем я получаю значения. Если я изменю его обратно на «размер 5» или «размер 4», значения больше не будут отображаться. Если я начну с «размера 5» в верхней части списка на моей веб-странице, он вообще не будет отображать никаких значений. Как я могу отображать цены на моей веб-странице, используя теги span в любой возможной последовательности идентификаторов?

Answer 1

Вам необходимо проверить, существует ли в DOM диапазон с идентификатором, а затем применить к нему внутренний HTML.

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 2

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>

Answer 3

Просто добавьте простое условие 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>