Почему JS не находит нужный элемент?

let currentLink = document.getElementsByClassName('.open_link'), infoBlock = document.getElementsByClassName('.info_block');  for (var i = 0; i < infoBlock.length; i++); for (var i = 0; i < currentLink.length; i++);  currentLink.onmouseover = function openInfoBlock() {     let currentTextBlock = currentLink[i].parentNode;              if (currentTextBlock.contains(infoBlock[i])) {         let currentInfoBlock = infoBlock[i];         if (currentInfoBlock.style.display == 'none') {             currentInfoBlock.style.display = 'block';         }     } }

<div class="safety-block">     <div class="flex">         <div class="image_box">             <img src="images/smth.png">         </div>         <div class="text-part">             <span class="date">Дата</span>             <p class="title"><b>Название</b></p>             <a href="#" class="open_link">Читать далее >></a>             <div id="info_block">                 <p>Информация</p>             </div>         </div>     </div> </div>

Нужно, чтобы при наведении на a.open_link дисплей div.info_block, который по умолчанию none, менялся на block. Т.к. JS не особо моя страсть, а уж массивы так тем более, то и код получился посредственным. Попытался сделать следующим образом:

1. Объявление переменных

2. for var для обозначения конкретного элемента из массива нашёл в интернете)) С currentLink работает, а вот с infoBlock не хочет (ну либо я неправильно использую)

3. Если курсор мыши наведён на currentLink, то нужно найти родительский элемент конкретно данной ссылки, и если там есть infoBlock (он как бы есть во везде, но это не суть :)), то infoBlock из этого родительского элемента становится currentInfoBlock.

4. Если у currentInfoBlock дисплей 'none', то нужно поменять на 'block'

Дополнительно:

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {   disply: none; } .open_link:hover + .info_block {   disply: block }

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.

• Спасибо, помогло! А если :hover условно надо будет поменять на onclick?
• всё, разобрался.

Ответы:

Любой из этих ошибок достаточно для того, чтобы ваш код не работал так, как вы хотите:

1. при запросе getElementsByClassName не нужна точка перед именем класса, как archelon уже сказал. В результате элементы не найдены.
2. блока с классом info_block у вас в разметке вообще нет. Есть с id=info_block, и его можно получить при помощи getElementById() или querySelector('#info_block')
3. феерическая трешанина при использовании for. Похоже, вы совсем не понимаете как его применять и не знаете даже зачем.
4. currentLink.onmouseover не сработает, т.ак как там пустая коллекция, из-за лишней точки в п.1
Даже если б была не пустая, пользы никакой не будет, т.к. нужно вешать обработчик на конкретные элементы, а не на коллекцию.
5. currentLink[i].parentNode - всегда будет ссылаться на последний найденный элемент, т.к. цикл for уже отработал. Но в вашем случае не ссылается никуда, т.к. элементы не найдены из-за лишней точки в п1.
6. currentInfoBlock = infoBlock[i] то-же самое, элементы info_block не найдены, и индекс i указывает на последний линк.
7. Если предположить, что приведенный фрагмент разметки у вас повторяется сколько-то раз на странице, тогда грубая ошибка - несколько элементов с одинаковым id.

• феерическая трешатина))0)

Не нужна точка перед названием класса.
Правильно:
document.getElementsByClassName('open_link')
Или так:
document.querySelectorAll('.open_link')

• Спасибо! Пытался уже через querySelector, забыл убрать. Но всё равно не помогло)