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

Question

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;
   }

}

Please click edit, then [<>] snippet editor and provide a minimal reproducible example with just HTML and Script — mplungjan
– mplungjan, Commented Nov 15, 2021 at 10:25

Tom · Accepted Answer · 2021-11-15 10:59:21Z

2

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>

edited Nov 15, 2021 at 10:59

answered Nov 15, 2021 at 10:46

Tom

5,6893 gold badges13 silver badges31 bronze badges

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

2 Comments

Mr.Devops Over a year ago

Excellent, just 1 additional change if you can to it. If var discount_price is less then var price then show otherwise hide if its greater, equal or no value

Tom Over a year ago

@Mr.Devops you can compare parseFloat(discount_price.innerHTML) and parseFloat(price.innerHTML)

Chinmay Dey · Accepted Answer · 2021-11-15 10:55:05Z

1

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>

answered Nov 15, 2021 at 10:55

Chinmay Dey

1424 bronze badges

1 Comment

Ronald Haan Over a year ago

Please consider to substantiate your answer and explain your code for unexperienced users

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related