Изменение alt у картинок

@rudoy24 · Регистрация: 03.10.2015

Author24 — интернет-сервис помощи студентам

Есть код результатом которого получаем alt у картинки, а в поле input-a можем его изменить на другой.

PHP/HTML

<html>
<body>
<img src="kartinka.jpg" alt="Image alt">
<input id="imgalt" value="" onchange="myFunction()">
<script>
document.getElementById("imgalt").value = document.getElementsByTagName("img").item(0).alt;
function myFunction() {
document.getElementsByTagName("img").item(0).alt = document.getElementById("imgalt").value;
}
</script>
</body>
</html>

Каким образом добится изменения alt-а для каждой картинки индивидуально?

HTML5

<img src="kartinka1.jpg" alt="Image alt1">
<input id="imgalt" value="" onchange="myFunction()">
 
<img src="kartinka2.jpg" alt="Image alt2">
<input id="imgalt" value="" onchange="myFunction()">
 
<img src="kartinka3.jpg" alt="Image alt3">
<input id="imgalt" value="" onchange="myFunction()">
 
...

@BANO · 16.11.2016, 21:33

Начнём с того, что id на странице может быть только один такой блондинистый, иначе он не уникален, то есть не identificator, то есть не id.

@vettel · 16.11.2016, 23:32

rudoy24, во-первых, замечание BANO абсолютно логичное, подумайте над этим.
Во-вторых, если после каждой картинки у вас будет идти инпут, который будет менять alt предыдущей ему картинки, то можно так (ф-я одна будет на все инпуты и картинки):

PHP/HTML

<img src="kartinka1.jpg" alt="Image alt1">
<input class="imgalt" value="">
 
<img src="kartinka2.jpg" alt="Image alt2">
<input class="imgalt" value="">
 
<img src="kartinka3.jpg" alt="Image alt3">
<input class="imgalt" value="">
 
<script>
var inputs = document.getElementsByClass('imgalt');
for(var i = 0; i < inputs.length; ++i) {
    inputs[i].onchange = function() {
        this.previousElementSibling.alt = this.value;
    }
}
</script>

@rudoy24 · 18.11.2016, 13:54 **[ТС]**

Рабочий вариант:

PHP/HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Alt change</title>
</head>
<body>
  
<p><img src="kartinka1.jpg" alt="Image alt1">
<input class="imgalt" value="Image alt1">
 
<p><img src="kartinka2.jpg" alt="Image alt2">
<input class="imgalt" value="Image alt2">
 
<p><img src="kartinka3.jpg" alt="Image alt3">
<input class="imgalt" value="Image alt3">
  
<script>
  
  document.body.addEventListener('input', function (event) {
    var target = event.target,
        text = target.value;
    target.previousElementSibling.alt = text;
  }, false);
  
</script>
</body>
</html>

Новые блоги и статьи
Элементы алгоритмизации hw_wired 28.01.2025 Основы алгоритмизации В современном мире алгоритмы играют фундаментальную роль в развитии информационных технологий и программирования. Понимание основ алгоритмизации является ключевым элементом в. . .	Человек и информация hw_wired 28.01.2025 Введение: роль информации в познании мира В современном мире информация играет фундаментальную роль в процессе познания окружающей действительности. Она представляет собой совокупность сведений об. . .	Компьютер и информация hw_wired 28.01.2025 Эволюция вычислительных машин История развития вычислительной техники начинается задолго до появления первых электронных устройств. Человечество всегда стремилось упростить процесс вычислений и. . .	Информационные технологии hw_wired 28.01.2025 Введение в современные технологии работы с информацией В современном мире информационные технологии стали неотъемлемой частью практически всех сфер человеческой деятельности. Они существенно. . .	Информация вокруг нас hw_wired 28.01.2025 Основные понятия информации В современном мире понятие информации является фундаментальным и охватывает практически все сферы человеческой деятельности. Информация представляет собой совокупность. . .	Компьютер для начинающих hw_wired 28.01.2025 Введение в мир компьютерных технологий В современном мире информация стала одним из важнейших ресурсов человечества, определяющим развитие общества и технологий. Наша жизнь неразрывно связана с. . .
[golang] 189. Rotate Array alhaos 28.01.2025 Повороты рукоятки, целочисленный слайс нужно сдвинуть на целое положительное число. Мне очень нравится решение на GO / / https:/ / leetcode. com/ studyplan/ top-interview-150/ package topInterview . . .	КуМир: решение задач на матрицы bytestream 28.01.2025 КуМир представляет собой среду для обучения программированию, которая включает в себя мощные инструменты для работы с матрицами. Матрица в программировании - это двумерный массив, состоящий из. . .	КуМир: решение задач на строки bytestream 28.01.2025 В системе программирования КуМир работа со строковыми данными является одним из важнейших аспектов создания программ. Строки представляют собой последовательности символов, заключенные в кавычки,. . .	КуМир: решение геометрических задач bytestream 28.01.2025 Программирование геометрических задач в среде КуМир становится всё более актуальным в обучении школьников и студентов. КуМир — это разработанная в России обучающая программная среда, предназначенная. . .	КуМир, исполнитель Водолей: Задачи и решения bytestream 28.01.2025 КуМир — это образовательная среда для обучения программированию. Она предлагает пользователям разнообразные инструменты для разработки и отладки программ, что особенно ценно для студентов и. . .	КуМир, исполнитель Чертежник: Решение задач bytestream 28.01.2025 КуМир (Комплект Учебных МИРов) представляет собой образовательную среду для обучения основам программирования и алгоритмизации. Исполнитель Чертежник работает на координатной плоскости, где может. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	16.11.2016, 21:33	2
	Начнём с того, что id на странице может быть только один такой блондинистый, иначе он не уникален, то есть не identificator, то есть не id. 0

	18.11.2016, 13:54