I created a dynamic template to populate products with pricing pulled directly from the catalog. However when a certain product is not on sale, there is still strikethrough pricing with the regular price even though they are both the same amount. I initially created two variables and if they equal each other, to set the regularPrice = null. HOwever that is not working. I am new to javascript and help would be appreciated!

strikethrough pricing:

my code:

const regularPrice = document.querySelector("span.pr__price--inactive").textContent;
    const salePrice = document.querySelector("span.pr__price--active").textContent;
    if (regularPrice === salePrice){
        regularPrice === null;
    }

markup:

{{#if attributes.price.value}}
                        <p >
                            <span ><span
                                data-locale="en_US"
                                data-currencycode="USD"
                            >$</span>{{attributes.price.value}}</span>
                            {{#if attributes.listPrice.value}}
                                <span ><span
                                        data-locale="en_US"
                                        data-currencycode="USD"
                                    >$</span>{{attributes.listPrice.value}}</span>
                            {{/if}}
                        </p>

CodePudding user response：

It is worth checking which will be getting to the code before checking if they are equal. log them using console.log() or use a debugger. Also using the query selector the first element of your class will be returned but you need to parse it using parseInt or parseDouble beforehand to make the comparison.

CodePudding user response：

Extracting values from your UI for comparison-- particularly if you have access to the raw data you're pulling-- is less than ideal. So I'll start by saying this is probably not a great approach.

However, I'll attempt to answer your question since you're missing a few important points.

1. Your version of the code is potentially going to change the value of regularPrice. Don't make it a const if it might change!
2. === is for strict equality comparison, not assignment. You're trying to use it for assignment.
3. Are you certain your page won't have multiple instances of span.pr__price--inactive and span.pr__price--active? Using IDs here would allow you to be specific.
4. textContent will return text. That's what you're attempting to compare. Shall we convert that to numeric value?

let regularPriceElement = document.querySelector("span.pr__price--inactive"); //this is a handle to the HTML element
let regularPrice = regularPriceElement.textContent; //this is a snapshot of the value in that element
let salePrice = document.querySelector("span.pr__price--active").textContent;
regularPrice =  regularPrice; //convert to a number
salePrice =  salePrice; //convert to a number
console.log(regularPrice, salePrice, regularPrice === salePrice);

if (regularPrice === salePrice){
    regularPriceElement.textContent = "(blank)"; //blank out the element content
    //or add strike-through
    regularPriceElement.style.textDecoration = "line-through";
}

<div>
<span >1.99</span>
</div>

<div>
<span >1.99</span>
</div>