Javascript не меняет источник изображения на странице load

Я очень новичок в javascript. Я пытаюсь изменить источник изображения на загрузку страницы. Я не знаю, почему это не работает. Может кто-нибудь, пожалуйста, предоставит мне некоторое представление об этом? Вот мой HTML-код:Javascript не меняет источник изображения на странице load

<html> 
 
    <body onload="changeImage()"> 
 
    <ul id="character-list"> 
 
     <li id="character1"> 
 
     <img src="character1.jpg" width="250px" height="280px" alt="" />   
 
     </li> 
 
    </ul> 
 
    
 
    </body> 
 
    
 
    <script> 
 
    function changeImage(){ 
 
     var charDiv = document.getElementById("character1"); 
 
     var imgTag = charDiv.getElementsByTagName('img'); 
 
     imgTag.src = "character2.jpg"; 
 
    } 
 
    </script> 
 
</html>

источник

2015-10-13 TheRadVillager

'getElementsByTagName' даст вам массив' image' тегов так 'imgTag.src' не будет работать в этом случае. – Sushil

['.getElementsByTagName'] (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) – Andreas

Но charDiv.getElementsByTagName (" img ") возвращает массив изображений внутри элемента с id = "character1". – TheRadVillager

getElementsByTagName("img") даст вам множество <img> элементов. В этом случае вам нужно просто открыть единственный элемент изображения в этом массиве charDiv.getElementsByTagName('img')[0]:

<html> 
 
    <body onload="changeImage()"> 
 
    <ul id="character-list"> 
 
     <li id="character1"> 
 
     <img src="character1.jpg" width="250px" height="280px" alt="" />   
 
     </li> 
 
    </ul> 
 
    
 
    </body> 
 
    
 
    <script> 
 
    function changeImage(){ 
 
     var charDiv = document.getElementById("character1"); 
 
     var imgTag = charDiv.getElementsByTagName('img')[0]; 
 
     imgTag.src = "character2.jpg"; 
 
    } 
 
    </script> 
 
</html>

источник

2015-10-13 16:56:24

Это работает! Большое спасибо :). Итак, charDiv.getElementsByTagName ('img') вернет массив элементов изображения внутри элемента с идентификатором «character1», правильно? И поскольку есть только одно изображение, индекс 0 содержит соответствующий тег изображения. Пожалуйста, поправьте меня, если я ошибаюсь. – TheRadVillager

@ wackydoodle Да, это правильно. –

Почему вы не используете один и тот же метод, чтобы получить IMG, как вы делаете для charDiv? Просто введите img ID, а затем просто получите к нему доступ по идентификатору. В противном случае вы получите массив всех img -элементов.

источник

2015-10-13 16:57:36 nameless

Ну, дело в том, что элементы больше, чем только тег изображения под тегом li, который нужно динамически менять. Все элементы должны быть изменены для определенного символа. Таким образом, я не хотел добавлять конкретный идентификатор к тегу изображения. – TheRadVillager

Вы также можете использовать:

function changeImage(){ 
     var imgTag = document.querySelector("#character1 img"); 

     imgTag.src = "new desired image path"; 
    } 

changeImage();

Кажется простым способом, если вы не можете по какой-то причине, дают идентификатор для изображения.

Демо: http://jsfiddle.net/ugw4q974/

источник

2015-10-13 16:59:54 sinisake

Javascript не меняет источник изображения на странице load

ответ

Смежные вопросы