getElementById не может найти уже существующий элемент

Question

Пытаюсь изменить css код при помощи js. Как я понимаю, он не находит элемент с таким id, но в html он есть. Функция запихнута в DOMContentLoaded, да и сам скрип подключается в конце body. Искал ответ в инете - не нашел.

function clear(){
    for(var i =0;i<5;i++){
        document.getElementById(i+1).style.visibility = "hidden";
    }
}

Пробовал i+1 запихать в ToString - не помогло. Что я делаю не так? html:

 <img name="slider_img" id="1" src="media/1.jpg">
 <img name="slider_img" id="2" src="media/2.jpg">
 <img name="slider_img" id="3" src="media/3.jpg">
 <img name="slider_img" id="4" src="media/4.jpg">
 <img name="slider_img" id="5" src="media/5.jpg">

function clear() {
  for (var i = 0; i < 5; i++) {
    document.getElementById(i + 1).style.visibility = "hidden";
  }
}

clear();

<img name="slider_img" id="1" src="media/1.jpg">
<img name="slider_img" id="2" src="media/2.jpg">
<img name="slider_img" id="3" src="media/3.jpg">
<img name="slider_img" id="4" src="media/4.jpg">
<img name="slider_img" id="5" src="media/5.jpg">

Answer 1

смотрите, что происходит у вас

<script />
<img />

выполняется js код
создаются элементы

поскольку скрипт расположен выше html элементов и значит вызывается раньше элементов, то этих элементов на момент вызова скрипта пока в документе не существует

что можно сделать - сначала html код, потом вызов скрипта:

<img />
<script />

или чтобы хотя бы вызов функции был ниже элементов

<script>function clear(){...}</script>
<img />
<script>clear()</script>

или создавайте элементы динамически с помощью JS и до вызова функции clear()

P.S.

<body>

<script>

document.addEventListener('DOMContentLoaded', (event) => {
    clear();
});

function clear(){
    for(var i =0;i<5;i++){
        document.getElementById(i+1).style.visibility = "hidden";
    }
}

</script>
    
 <img name="slider_img" id="1" src="media/1.jpg">
 <img name="slider_img" id="2" src="media/2.jpg">
 <img name="slider_img" id="3" src="media/3.jpg">
 <img name="slider_img" id="4" src="media/4.jpg">
 <img name="slider_img" id="5" src="media/5.jpg">

</body>

так тоже все работает

БЛОГ НА HUSL

getElementById не может найти уже существующий элемент

Ответы (1 шт):