Форум

rudoy24 · #1 (**permalink**) 16.11.2016, 16:04

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

<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-а для каждой картиноки индивидуально?

<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()">

...

Coriolan161 · #2 (**permalink**) 16.11.2016, 16:25

rudoy24,
Брат вместо onchange надо oninput
Почитай https://learn.javascript.ru/events-change

Pavel M. · #3 (**permalink**) 16.11.2016, 17:28

можно так
и обработчик можно на каждый input не вешать
старые IE не учитывал

<!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>

rudoy24 · #4 (**permalink**) 18.11.2016, 13:53

Pavel M. - благодарю, именно то что нужно

Форум

Справочник

Discord чат

Курсы javascript