Как изменить цвет фона в карусели на основе условия

Question

Я бы хотел изменить цвет фона элементов карусели, цена которых ниже £ 500. Мне нужно сделать это в JavaScript DOM, но, похоже, ничего не работает .... Вот что я придумал:

// Get the elements- price and each carousel element

let price = document.getElementsByClassName("price");
let greenBackground = document.getElementsByClassName("close")[0];

//Prices are given as strings so I tried to convert it to a number to be able to compare

let priceAsNumber = parseInt(price, 10); 

//and finally I tried to apply the condition to change the background color

function changeBackground () {
  if (priceAsNumber <= 500) {
  document.greenBackground.style.background = #81CA81; 
  }
};

changeBackground();

Я новичок, поэтому код может отсутствовать много, но я был бы очень признателен за советы по достижению результата!

Вот пример html:

<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2446px;"><div class="owl-item active" style="width: 152.857px;"><li class="all-months close selected"><label class="date-price-holidays">All Holidays<input type="radio" id="filter60_24" name="filter60" value="24" data-filter="24" data-compare="== 24 &amp;&amp; r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; &#39;24&#39; == " data-no="50" data-type="groupTxt" data-pos="-1" class="noautostyle filter-active" data-name-value="month" checked="checked" data-no-remember-notification="true"><span><span class="count">516</span> <span>found</span></span></label></li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
                                <label class="date-price-holidays">
                                    <span class="month">Mar<span class="year">2020</span></span>
                                    <input type="radio" id="filter60_2" name="filter60" value="2" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 0" data-no="50" data-type="groupTxt" data-pos="2" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
                                    <span class="count-and-price"><span class="count">2</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£629<span class="pp">pp</span></span></span>
                                </label>
                            </li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
                                <label class="date-price-holidays">
                                    <span class="month">Apr<span class="year">2020</span></span>
                                    <input type="radio" id="filter60_3" name="filter60" value="3" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 0" data-no="50" data-type="groupTxt" data-pos="3" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
                                    <span class="count-and-price"><span class="count">105</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£249<span class="pp">pp</span></span></span>
                                </label>
                            </li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
                                <label class="date-price-holidays">
                                    <span class="month">May<span class="year">2020</span></span>
                                    <input type="radio" id="filter60_4" name="filter60" value="4" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 0" data-no="50" data-type="groupTxt" data-pos="4" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
                                    <span class="count-and-price"><span class="count">450</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£289<span class="pp">pp</span></span></span>
                                </label>
                            </li></div><div class="owl-item active" style="width: 152.857px;"><li class="close">
                                <label class="date-price-holidays">
                                    <span class="month">Jun<span class="year">2020</span></span>
                                    <input type="radio" id="filter60_5" name="filter60" value="5" data-filter=" r.matchFlights[jvh.search.settings.currentMonth] &gt;= jvh.search.settings.currentAirportId &amp;&amp; r.sale[jvh.search.settings.currentMonth]" data-compare="&gt; 0" data-no="50" data-type="groupTxt" data-pos="5" class="noautostyle" data-name-value="month" data-no-remember-notification="true">
                                    <span class="count-and-price"><span class="count">402</span> <span class="holidays">holidays</span><span class="from"> from </span><span class="price">£559<span class="pp">pp</span></span></span>
                                </label>

Answer 1

Вот краткий пример рабочего кода и пример на плункере

<script>
  function changeColor(){
    // get all price nodes
    let priceNodes = document.getElementsByClassName('price');

    //iteration over all collected HTMLnodes
    for(let i = 0; i< priceNodes.length; i++){
      //parse the value and remove euro sign
      let nodeWithPrice = priceNodes[i].textContent.slice(1);

      //convert string value to numeric
      nodeWithPrice = parseInt(nodeWithPrice);

      //check according your condition
      if(nodeWithPrice <= 500){

        //if price less or equal of 500 - change color of html-node
        //find your node using Element.closest() method
        console.log(priceNodes[i].closest('.close'));
        priceNodes[i].closest('.close').style.background = '#81CA81';
      }
    }
  }

  changeColor();
</script>

https://plnkr.co/edit/Ln9YXuAowbeWCKJ9Ifzt?p=info

Answer 2

Когда вы используете let price = document.getElementsByClassName("price");, вы получите объект HTMLCollection.

Моя рекомендация: если вы хотите получить только один элемент, просто используйте querySelector, как показано ниже:

let price = document.querySelector('.price');
let greenBackground = document.getElementsByClassName('.close');

Итак, вы получаете объект элемента DOM. Затем вы должны сначала получить его значение, а затем проанализировать его.

let priceAsNumber = parseInt(price.innerText, 10); 

Итак, все решение должно выглядеть следующим образом:

let price = document.querySelector('.price');
let greenBackground = document.getElementsByClassName('.close');
let priceAsNumber = parseInt(price.innerText, 10);
function changeBackground () {
  if (priceAsNumber <= 500) {
     document.greenBackground.style.background = #81CA81; 
  }
};
changeBackground();