Javascript array id display sequence

Question

I've made a simple javascript array of prices that I want to use all around my website via ID attributes.

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>

The problem is my webpage doesn't display values for the "size 5". I've tried to change the third span id to the "size 3" and then I get the values. If I change it back to "size 5" or "size 4", the values don't show again. If I begin with the "size 5" at the top of the list on my webpage, it get no values displayed at all. How can I display prices on my webpage using span tags in any possible ID sequence?

When something doesn't work as expected we need to figure out how to isolate and identify the problem. The first thing you should do is make sure your selectors are working. js var span = document.getElementById(id); console.log("span:", span); — JayB
– JayB, Commented Mar 21, 2020 at 16:28

user5955461 · Accepted Answer · 2020-03-21 16:48:33Z

3

You need to check if the span with the id exists in the DOM and then apply the innerHTML to it.

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>

edited Mar 21, 2020 at 16:48

answered Mar 21, 2020 at 16:29

user5955461

7762 gold badges8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JayB Over a year ago

You're missing a closing paren on the if statement. Also you should store the selection as a variable to avoid running it twice (it's relatively expensive).

Code Maniac · Accepted Answer · 2020-03-21 16:27:31Z

0

Just add a simple if condition to check whether the element with Id is found in document or not, and based on that process further

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>

answered Mar 21, 2020 at 16:27

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

1 Comment

enars Over a year ago

Brilliant! It works flawless now. Thank you so much!

JayB · Accepted Answer · 2020-03-21 16:38:58Z

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>

Collectives™ on Stack Overflow

Javascript array id display sequence

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related