Как написать функцию диапазона цен?

Question

[Дмитрий Руденко]

Здравствуйте.Голову ломаю уже час,что не пробовал,не выходит.
В общем,есть блоки,в которых есть P,в котором я прописал data-filter="например,3000",в разных блоках разные значения.
В скрипте взял переменную массив самих блоков и вторая переменная массив P.
Пробовал написать функцию

let assortments = document.querySelectorAll(".product__item");
let price = document.querySelectorAll(".product__item .product__price");
let range = document.querySelectorAll(".input__range");
let button = document.querySelector(".form-button__apply");
button.addEventListener('click',filterPrice);
function filterPrice()
{
    for (let product of price)
    {
        for (product1 of assortments)
        {
            product1.classList.add('none');
            if (Number(product.dataset.filter) >= Number(range[0].value)   &&  Number(product.dataset.filter) <= Number(range[1].value))
            {
               
                product1.classList.remove('none');
             
            }
            else 
            {
                console.log('111');
            }
        }
        

    }
    
}

Но после прохода функции всё остаётся на местах.
Делал проверки,алгоритм находит те значения,которые входят в условие,но почему-то не делает их блоками.
Может я и саму функцию неправильно составил,помогите,пожалуйста.
P.S.(В js новичок,если совсем всё криво,не судите строго:))

Comments

[Andrey Vasilev]

v pesochnizu

[WapSter]

Классная запись Number(product.dataset.filter)

Answer 1

[Воващ]

Можно взять все .product__item => перебирая их найти в них значения data-filter -> перевести в чиселко ->
по условию скрыть то, что нужно скрыть

let assortments = document.querySelectorAll('.product__item');

assortments.forEach(item =>{
  let any = parseInt(item.getElementsByTagName("P")[0].getAttribute("data-filter"));
  if(any < 2000){
    item.classList.add('none');
  }
});

весь прогон обернуть в функцию, передать туда значению по которому желаем фильтровать

Comments

[Дмитрий Руденко]

assortments.forEach(item =>
{
let any = parseInt(item.getElementsByClassName("product__price")[0].getAttribute("data-filter"));
console.log(any)
if (any >= range[0].value && any <= range[0].value)
{
console.log('1');
}
else
{
console.log(any * range[0].value)
console.log("2");

}

})
Я такой код написал,но там почему-то всегда else срабатывает
range - это значеия с инпутов текст

[Воващ]

Дмитрий Руденко, (any >= range[0].value && any <= range[0].value)

пусть range[0].value = 1000 -> any > =1000 и any <= 1000 , странный диапазон

вероятно у тебя 2 инпута => диапазон должен быть (any >= range[0].value && any <= range[1].value)

[Дмитрий Руденко]

V0vash, Так у тебя то же самое написано,что и у меня,в чем проблема?
Да,два инпута,один с первом значением,второй со вторым.
Вот я хотел так,если any состоит в данном диапазоне,то any прописывается display:blok,а у остальных,кто не вошел в диапазон ставится none

[Воващ]

Дмитрий Руденко, смотри первый комментарий строку с условием if (any >= range[0].value && any <= range[0].value),
дважды повторил значение из массива range, которые по логике должны быть разными

[Дмитрий Руденко]

V0vash, Аа,не увидел,уже,видимо,устал сидеть над этим)
Но всё же,даже если я сейчас упорядочил значения массива,всё равно он все выводит,он как будто условие игнорирует
По идеи,если сейчас ввести в первый рендж 333,а во второй 3333,то он должен был мне привязать display:block к 3 блокам,а там вообще срабатывает else

assortments.forEach(item =>
{
let any = parseInt(item.getElementsByClassName("product__price")[0].getAttribute("data-filter"));
console.log(any)
item.style.display = "none";
if (!(any >= range[0].value && any <= range[1].value))
{
item.style.display = "block";

}
else
{
console.log(any * range[0].value)
console.log("2");
item.style.display = "block";

}

})

[Воващ]

Дмитрий Руденко, смотри, перебирая assortments ты делаешь item.style.display = "none";
потом ты такой говоришь "ТУТ УСЛОВИЕ" и в любом исходе зачем-то делаешь item.style.display = "block";

Нужно определить для себя, в каком случае мы покажем, а в каком нет.

т.е. убери item.style.display = "block"; либо в IF либо в ELSE

[Дмитрий Руденко]

V0vash, Это я уже заметил,да,видимо,пора уже отдыхать,прошу прощения)
Сейчас если вводить 333 и 3333,то выводит всё верно.
Но если ввести,например,4000 и 15000,то он выводит все блоки,даже те,которые в этот диапазон не входят(3000,2000)