CODEWITHSUNDEEP
javascripthtml
Mr.Devops
Mr.Devops

Reputation: 306

Replace value from JS if found inside div based on if/else condition

I have an html code from an online product recommendation platform which allows me to add JS to html.

The HTML code below works fine, but i want to apply JS to it based on the logic that, if ${discountvalue} shows any value, then both ${discountvalue} and ${regularvalue} values are visible with cross line on regularvalue.

If ${regularvalue} does not have any value or is empty/null, then only ${regularvalue} will be visible.

HTML CODE:

<div class="slider-wrapper">
${#Recommendations} // This loads the the more then one values of product recommendation

    ${discountvalue}
    ${regularvalue}

    <div class="slider-wrapper">
      <div class="pricebox">
        <p class="dynamic-price">${discountvalue}</p>
        <p class="regular-price">
          <span class="rec_price_num">${regularvalue}</span>
        </p>
      </div>
    </div>

${/#Recommendations}
</div>

And this is the JS code:

var itemPrices = document.querySelectorAll('.slider-wrapper .pricebox');
for(var i=0; i<itemPrices.length; i++){

   var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML;
   var price = getElementsByClassName("rec_price_num")[0].innerHTML;

   if(discount_price){
      var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML;
      var price = getElementsByClassName("rec_price_num")[0].innerHTML;
   }
   else {
       var price = getElementsByClassName("rec_price_num")[0].innerHTML;
   }

}

Upvotes: 1

Views: 358

Answers (2)

Tom
Tom

Reputation: 5677

parseFloat(discount_price.innerHTML) will return a truthy value if the discount price can be parsed to a floating point number different from 0.

You can use the CSS rule text-decoration: line-through; to have a cross line on the value.

var itemPrices = document.querySelectorAll('.slider-wrapper .pricebox');
for(var i=0; i<itemPrices.length; i++){

   var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0];
   var price = itemPrices[i].getElementsByClassName("regular-price")[0];
   
   if(parseFloat(discount_price.innerHTML)){
     price.style.textDecoration = "line-through";
   } else {
     discount_price.style.display = "none";
   }
}
<div class="slider-wrapper">
  <div class="pricebox">
    <p class="dynamic-price">0</p>
    <p class="regular-price">5</p>
  </div>
  <hr>
  <div class="pricebox">
    <p class="dynamic-price">4</p>
    <p class="regular-price">5</p>
  </div>
</div>

Upvotes: 2

Chinmay Dey
Chinmay Dey

Reputation: 144

Don't need javascript. can be solved by css3

.pricebox p {
        font-weight: bold;
        font-size: 1.5rem;
        color: red;
        margin: 0 0 1rem;
    }
    .pricebox .dynamic-price {
        margin-bottom: 0;
    }
    .pricebox .dynamic-price:empty {
        display: none
    }
    .pricebox .dynamic-price:not(:empty) + .regular-price {
        font-size: .875rem;
        color: gray;
        text-decoration: line-through;
    }
<div class="slider-wrapper">
    <div class="slider-wrapper">
      <div class="pricebox">
        <p class="dynamic-price"></p>
        <p class="regular-price">
          <span class="rec_price_num">200.00</span>
        </p>
      </div>
      <div class="pricebox">
        <p class="dynamic-price">100.00</p>
        <p class="regular-price">
          <span class="rec_price_num">150.00</span>
        </p>
      </div>
    </div>
</div>

Upvotes: 1

Related Questions