Здравствуйте, подскажите как можно выделять цену жирным шрифтом или менять цвет текста в зависимости от введенного значения в 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));
});
});
Простой
