Как отобразить блоки при совпадении value и Inner.text?

Question

[Nicknick1]

Буду признателен за помощь,

Пытаюсь настроить смену класса для всех $blocks при совпадении inner.text в $blocks и value в $ask,

Не понимаю как заменить класс href на trev.

HTML

<input type="text" id="looker"/>
       <p><input type="button" value="Проверить" onclick="search()"></p>

       <div class="grid">
        <a href="#" class="herf">Новая</a>
        <a href="#" class="herf">Старая</a>
        <a href="#" class="herf">Лучшая</a>
       </div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
}

.href {
  display: none;
}

.trev {
  display: block;
  background-color: antiquewhite;
}

function search() {
    let grid = document.getElementById('grid');
    let ask = document.getElementById('looker').value;
    let blocks = document.getElementById('href').innerText;

    if (ask == blocks)
    {
        newButton.forEach(v => v.classList.remove('href'));
    }
}

Answer 1

[Ne7Le4Der]

https://codesandbox.io/s/keen-ben-xy51ep?file=/ind...

1)
<a href="#" class="herf">Новая</a>

Тут у вас class, а в js вы пытаетесь взять элементы по id (не говорю о том, что ищите вы href, а класс herf)

let blocks = document.getElementById('href').innerText;

id - это уникальный идентификатор, который может быть только у одного блока, поэтому по определению вы не получите массив. Нужно использовать

let blocks = document.getElementsByClassName("href");

2)

let blocks = document.getElementById('href').innerText;

    if (ask == blocks)
    {
        newButton.forEach(v => v.classList.remove('href'));
    }

Что такое newButton из куска который вы привели непонятно, поэтому тут ничем помочь не могу, но я думаю с примером в sandbox'e разберётесь и поправите под себя