I have a small app that should get two price values from elements on a website. This is achieved by iterating over the .textContent of the two querySelectors (cardStartBidValueString and cardCurrentBidValuesString). Then I also get all elements with a specific CSS selector (cardBg).

What I want to do is to check if the start price and the current bid price are both < userInputBidPrice (which is the cap of what a user wants to bid) and if this is true, then change the background color of that item so the user can directly see a potential deal. In sum there are 20 elemenets that include those two prices. So basically I want to change the background of all elements for which above condition is true.

Unfortunately its nor working. if I say cardBg[i].style['background-color'] = '#0311c3'then it only changes the color when the CurrentBidPrice is < userInputBidPrice and if I change it to cardBg[x].style['background-color'] = '#0311c3' then it colors all item if the startBidPrice is < userInputBidPrice

For some reason it is not checking if both conditions are true.

This is my code:

function deals() {
    let userInputBidPrice = prompt('Set max Bid Price:');
    let cardCurrentBidValuesString = document.querySelectorAll('.auction > .auctionValue:nth-child(2) > .currency-coins.value');
    let cardStartBidValueString = document.querySelectorAll('.auction > .auctionStartPrice.auctionValue > .currency-coins.value');
    let cardBg = document.querySelectorAll('.rowContent.has-tap-callback');

    for (let i = 0; i < cardCurrentBidValuesString.length; i++) {
        cardsCurrentBidPrice = cardCurrentBidValuesString[i].textContent.toString().split(',').join('');

        if (cardsCurrentBidPrice === '---') {
            cardsCurrentBidPrice = 0;
        }
        parsedCardsCurrentBidPrice = parseInt(cardsCurrentBidPrice);

        for (let x = 0; x < cardStartBidValueString.length; x++) {
            cardsStartBidPrice = cardStartBidValueString[x].textContent.toString().split(',').join('');
            if (cardsStartBidPrice === '---') {
                cardsStartBidPrice = 0;
            }
            parsedCardsStartBidPrice = parseInt(cardsStartBidPrice);
        }

        if (parsedCardsCurrentBidPrice < parseInt(userInputBidPrice) && parsedCardsStartBidPrice < parseInt(userInputBidPrice)) {
            cardBg[i].style['background-color'] = '#0311c3';
        }
    }
}

deals();