@EgorP13

Как выделить текста от значения инпута?

Здравствуйте, подскажите как можно выделять цену жирным шрифтом или менять цвет текста в зависимости от введенного значения в input.
У меня есть цены: основная и скидочные.
При количестве до 5 основная цена, после 5 скидочная, например после 10 другая скидочная.
Когда введенное значение попадает в диапазон от 5 до 9 подсвечивается одна цена, от 10 и выше другая.
Надеюсь расписал подробно и получится помочь.Заранее спасибо.
Проблема в том что не понимаю как подсвечивать текст от введенного значения.
Вот код и разметка с помощью которого я пытался это сделать:
<ul class="list-unstyled">
                         <li>
              <h2 class="price-cart" style="color: rgb(6, 134, 205);">1 300.00 руб</h2>
            </li>
                       
            <li>
            <h2 class="discount-price" > 1 200.00 руб </h2>
            <input type="hidden" class="discount-quantity" value="5">
            </li>
                       
            <li>
            <h2 class="discount-price"> 1 000.00 руб </h2>
            <input type="hidden" class="discount-quantity" value="10">
            </li>
                     
                      </ul>

$(document).ready(function() {
  var QuantityInput = 0;
  var PriceCard = document.getElementsByClassName("price-cart");
  var Quantity = document.getElementById("category");
  var DiscountQuantity = document.getElementsByClassName("discount-quantity");
 
  function СompareQuantity(value) {
    for (var i = 0; i < DiscountQuantity.length; i++) {
      if (value >= parseInt(DiscountQuantity[i].value)) {
        PriceCard[0].style.color = "";
        DiscountQuantity[i].parentNode.firstElementChild.style.color =
          "#0686cd";
      } else if (value < parseInt(DiscountQuantity[i].value)) {
        DiscountQuantity[i].parentNode.firstElementChild.style.color = "";
        PriceCard[0].style.color = "#0686cd";
      }
    }
  }
 
  Quantity.addEventListener("input", function(event) {
    QuantityInput = event.target.value;
    СompareQuantity(parseInt(QuantityInput));
  });
});
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 1
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы