Вывод данные JS в нескольких местах

12 3
W
На сайте с 05.02.2010
Offline
99
575

Здравствуйте, JS не знаю, но появилась необходимость реализовать вывод одного значения в нескольких местах. Имею такой код:

<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<textarea name="my-area" id="my-area" cols="30" rows="10"></textarea>
<script>
    let display = document.querySelector('#my-area');
display.addEventListener('change', () =>{ 
  document.getElementById('parent').innerHTML = display.value;
})
</script>


В поле textarea вводим текст, но он выводится только в первом div, а как сделать так чтобы он выводился во всех div с id="parent" ?

Заранее спасибо всем кто откликнется и поможет!

-S
На сайте с 10.12.2006
Offline
1355
#1
JavaScript and getElementById for multiple elements with the same ID
JavaScript and getElementById for multiple elements with the same ID
  • 2010.08.31
  • Rajan P Rajan P 635 1 1 gold badge 5 5 silver badges 3 3 bronze badges
  • stackoverflow.com
How can I get a collection of elements by specifying their attribute? I want to get the name of all the tags which have the same in the html. I want to use ONLY to get an array of elements. How can I do this?
D.iK.iJ
На сайте с 26.05.2013
Offline
228
#2
ID на странице может быть только ОДИН! Меняйте на класс. Или на ID1, ID2 и так далее. Иначе словите еще гору глюков.
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
D
На сайте с 28.06.2008
Offline
1104
#3
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent2"><b>Старое содержимое</b></div>
<textarea name="my-area" id="my-area" cols="30" rows="10"></textarea>
<script>
    let display = document.querySelector('#my-area');
display.addEventListener('change', () =>{
  document.getElementById('parent').innerHTML = display.value;
  document.getElementById('parent2').innerHTML = display.value;
})
</script>
ArbNet
На сайте с 27.10.2019
Offline
129
#4

😁

<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<textarea name="my-area" id="my-area" cols="30" rows="10"></textarea>
<script>
  let display = document.querySelector('#my-area');
  display.addEventListener('keyup', () =>{
    let els=document.querySelectorAll('[id="parent"]');
    for(let elt of els)elt.innerHTML=display.value;
  })
</script>
Собираю команду для совместной работы, так же можете там понаблюдать как я работаю и пообщаться со мной ;) https://discord.gg/CmckMR3jg2
W
На сайте с 05.02.2010
Offline
99
#5
D.iK.iJ #:
ID на странице может быть только ОДИН! Меняйте на класс. Или на ID1, ID2 и так далее. Иначе словите еще гору глюков.
Всем спасибо кто ответил, помог вариант D.iK.iJ 👍

Остальные возможно тоже работают, но этот вариант для меня неопытного, оказался самым простым)

SeVlad
На сайте с 03.11.2008
Offline
1609
#6
ArbNet #:

<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>
<div id="parent"><b>Старое содержимое</b></div>

Это всё, что нужно знать о гениальных фреймворках. :)

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
ArbNet
На сайте с 27.10.2019
Offline
129
#7
SeVlad #:

Это всё, что нужно знать о гениальных фреймворках. :)

Я просто продемонстрировал, что это возможно сделать. Не обязательно делать по id, вернее лучше по data-атрибуту, например:

<div data-nick="parent"><b>Старое содержимое</b></div>
<div data-nick="parent"><b>Старое содержимое</b></div>
<div data-nick="parent"><b>Старое содержимое</b></div>
<div data-nick="parent"><b>Старое содержимое</b></div>
<div data-nick="parent"><b>Старое содержимое</b></div>
<textarea name="my-area" id="my-area" cols="30" rows="10"></textarea>
<script>
  let display = document.querySelector('#my-area');
  display.addEventListener('keyup', () =>{
    let els=document.querySelectorAll('[data-nick="parent"]');
    for(let elt of els)elt.innerHTML=display.value;
  })
</script>
SeVlad
На сайте с 03.11.2008
Offline
1609
#8
ArbNet #:

Я просто продемонстрировал, что это возможно сделать.

Иди что ли учить матчать, демонстратор :) На тебя же люди смотрят. А некоторые даже верят.
Атрибут id
  • htmlbook.ru
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз. Синтаксис Значения...
ArbNet
На сайте с 27.10.2019
Offline
129
#9
SeVlad #:
Иди что ли учить матчать, демонстратор :) На тебя же люди смотрят. А некоторые даже верят.

Слышь 😎 не тебе меня учить. Думаешь я не в курсе для чего нужен атрибут id 😁

SeVlad
На сайте с 03.11.2008
Offline
1609
#10
ArbNet #:
Думаешь я не в курсе для чего нужен атрибут id

До этого топика я надеялся, что знаешь. Теперь ты убил и эту надежду. :)

Иди, всё же поучи.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий