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

Question

[klazz]

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'

Answer 1

[Ankhena]

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

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

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

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

Comments

[klazz]

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

[klazz]

всё, разобрался.

Answer 2

[Stalker_RED]

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

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.

Comments

[NeshnyyFevral]

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

Answer 3

[archelon]

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

Comments

[klazz]

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