Я устанавливаю прослушиватели событий на пару входов с forEach l oop. В событии «change» я хочу анимировать элемент родного брата в качестве индикатора выполнения.
Проблема в том, что независимо от того, какое событие Listener запускает, он всегда будет стилизовать родного брата первого элемента ввода, нет независимо от того, какой вход вызывает событие изменения.
HTML
<div>
<input type="file" class="upload--file" id="upload--file">
<label for="upload--file"></label>
<img>
<h3></h3>
<p></p>
<div class='BG'></div>
</div>
<div>
<input type="file" class="upload--file" >
<label for="upload--file"></label>
<img>
<h3></h3>
<p></p>
<div class='BG'></div>
</div>
JS
document.querySelectorAll('.upload--file').forEach(item => {
item.addEventListener('change', () => {
item.parentNode.childNodes[11].style.height = '100%';
})
})
Как вы можете видеть на изображении, я нажал второй поле, но стиль применяется к div внутри первого поля. ![enter image description here](https://i.stack.imgur.com/8BkrH.png)