Using JavaScript to detect and display HTML content

Question

Scenario:

I have a site listing prices for a few products - each has a 'full price' and 'sale price' attribute. If the item isn't on sale, the 'sales price' is simply left blank.

Using JavaScript, I want to display the lowest price for each item (eg if there is a sale price display that, otherwise show the full price).

How would I write a script that accomplishes that?

I put an example in JSFiddle to show what I mean. The lowest price should be displayed in the "pricestory" div.

<div class="salePrice" id="saleprice">59.99</div>
<div class="listPrice" id="listprice">70.00</div>
<div class="priceStory" id="pricestory"></div>

Answer 1

Pure CSS solution: http://jsfiddle.net/upyjdym9/

.listPrice {
   display: none;
}     
.salePrice:empty + .listPrice {
  display: block;
}

Is this what you want?

Answer 2

Assuming the elements are always in the order:

1. salePrice
2. listPrice
3. priceStory

…, you can iterate through all the salePrice items, and use nextElementSibling to set the priceStory content as needed:

[].forEach.call(document.querySelectorAll('.salePrice'), function(sp) {
  var salePrice = sp.textContent || Infinity,  //default to Infinity if missing, 
                                               //so Math.min will use listPrice
      listPrice = sp.nextElementSibling.textContent || Infinity;

  sp.nextElementSibling.nextElementSibling.textContent = Math.min(salePrice, listPrice);
});

 [].forEach.call(document.querySelectorAll('.salePrice'), function(sp) { var salePrice = sp.textContent || Infinity, //default to Infinity, so Math.min will use listPrice listPrice = sp.nextElementSibling.textContent || Infinity; sp.nextElementSibling.nextElementSibling.textContent = Math.min(salePrice, listPrice); }); 

 .salePrice { font-family: arial; font-size: 12px; color: #777777; } .listPrice { font-family: arial; font-size: 12px; color: #000000; } .priceStory { font-family: arial; font-size: 12px; color: #777777; margin-bottom: 20px; } 

 <div class="products"> <div class="salePrice" id="saleprice">59.99</div> <div class="listPrice" id="listprice">70.00</div> <div class="priceStory" id="pricestory"></div> <div class="salePrice" id="saleprice2"></div> <div class="listPrice" id="listprice2">70.00</div> <div class="priceStory" id="pricestory2"></div> <div class="salePrice" id="saleprice3">79.99</div> <div class="listPrice" id="listprice3">70.00</div> <div class="priceStory" id="pricestory3"></div> <div class="salePrice" id="saleprice4">35.99</div> <div class="listPrice" id="listprice4"></div> <div class="priceStory" id="pricestory4"></div> </div> 

Answer 3

What about this solution.

 var salePriceElements = document.getElementsByClassName('salePrice'); var listPriceElements = document.getElementsByClassName('listPrice'); var priceStoryElements = document.getElementsByClassName('priceStory') for (var i = 0; i < salePriceElements.length; i++) { var salePrice = salePriceElements[i].innerHTML; var listPrice = listPriceElements[i].innerHTML; var priceStory = listPrice || salePrice; if (listPrice && salePrice) { priceStory = listPrice > salePrice ? salePrice : listPrice; } priceStoryElements[i].innerHTML = priceStory; } 

 .salePrice{ font-family:arial; font-size: 12px; color:#777777; } .listPrice{ font-family:arial; font-size: 12px; color:#000000; } .priceStory{ font-family:arial; font-size: 12px; color:#777777; margin-bottom:20px; } #explanation{ font-family:arial; font-size: 12px; color:#777777; } 

 <div class="products"> <div class="salePrice" id="saleprice">59.99</div> <div class="listPrice" id="listprice">70.00</div> <div class="priceStory" id="pricestory"></div> <div class="salePrice" id="saleprice2"></div> <div class="listPrice" id="listprice2">70.00</div> <div class="priceStory" id="pricestory2"></div> <div class="salePrice" id="saleprice3">79.99</div> <div class="listPrice" id="listprice3">70.00</div> <div class="priceStory" id="pricestory3"></div> <div class="salePrice" id="saleprice4">35.99</div> <div class="listPrice" id="listprice4"></div> <div class="priceStory" id="pricestory4"></div> </div>