Как использовать innerHTML, чтобы изменить img с классом
Я хотел бы изменить img
с помощью Ajax. Но консоль говорит: "Невозможно установить свойство innerHTML из неопределенного", и innerHTML
Не работает должным образом. Как я могу изменить img
у которого есть класс type
?
var pokeIcon = document.getElementsByClassName("type");
for(var k=0; k < pokeIcon.length; k++){
pokeIcon[i].innerHTML = "<img src=\"" + data.images.typeIcon + "\">";
}
HTML написан ниже; (есть несколько элементов, которые имеют класс type
и поэтому я не могу использовать id
за это.
<img src="icons/normal.jpg" alt="type" class="type"/>
5 ответов
Два вопроса:
Ваш счетчик циклов
k
, но вы используетеi
в назначенииЧтобы изменить
src
изображения, вы меняетеsrc
Вы не используетеinnerHTML
Так:
var pokeIcon = document.getElementsByClassName("type");
for(var k=0; k < pokeIcon.length; k++){
pokeIcon[k].src = data.images.typeIcon;
// ------^--^^^^^^^^^^^^^^^^^^^^^^^^^^
}
Ваш вопрос название
Как использовать innerHTML, чтобы изменить img с классом
... так что, если это действительно ваш вопрос, ответ: вы не можете разумно сделать это. Вы должны установить innerHTML
родительского элемента, что означало бы уничтожение и воссоздание всех его дочерних элементов (которые удалили бы их обработчики событий, если они есть).
Вы могли бы сделать это с outerHTML
, но src
это лучший способ.
Вы можете использовать селектор запросов и свойство src.
var images = document.querySelectorAll('img.type');
var i = 0, limit = images.length;
for(i=0; i<limit; i++){
images[i].src = data.images.typeIcon;
}
Не используйте innerHTML для изображений. Используйте.src для того же.
pokeIcon[k].src = data.images.typeIcon;
Вы можете просто установить src
атрибут, в любом случае проблема в том, что вы используете переменную k
для цикла и переменной i
установить источник изображения.
Чтобы установить src изображения, смотрите следующее:
var img = document.getElementsByClassName("type");
for(var k=0; k < img.length; k++){
img[k].src = "http://www.maglioccola.com/images/stackru.png";
}
<img class="type">
Я надеюсь, это поможет вам, пока.