1

У меня в HTML созданы 2 кнопки, у них есть свой id и name, мне нужно сделать так, чтобы они получали свой текст из name button, я думаю, что для этого я должен передать id и name button из HTML в JavaScript и из JS сгенерировать текст кнопки в HTML файл, но как это сделать не знаю. В любом случае буду очень благодарен за помощь.

2
  • После загрузки древа DOM пройтись по всем кнопкам в цикле и в innerHTML записать значение атрибута name 14 янв 2019 в 8:17
  • Почему не заполнить текст там где заполняется name?
    – holden321
    14 янв 2019 в 10:41

2 ответа 2

6

В том случае, если вам не обязательно использовать JS, можно обойтись псевдоэлементом :before и в content вытащить нужный атрибут.

button:before {
  content: attr(name);
}
<button id="id1" name="test1"></button>
<button id="id2" name="test2"></button>

4
  • Такое ощущение, что CSS скоро заменит JS, он уже много, где его заменяет. И самое главное, что это мне даже нравится.)) 14 янв 2019 в 8:55
  • @SonicMyst данный прием совсем не новый. Но, да, сейчас при помощи css можно очень много всего реализовать без использования JS. 14 янв 2019 в 9:11
  • Спасибо брат за помощь, проста требовали сделать это с помощью js 14 янв 2019 в 10:44
  • 1
    Не вопрос. Я потому и написал, что это альтернатива JS в данном примере) 14 янв 2019 в 15:19
3

После загрузки DOM дерева выполняете следующий код:

Javascript:

var el = document.querySelectorAll('button');

for (var i = 0; i < el.length; i++) {
  el[i].textContent = el[i].getAttribute('name');
}
<button id="id1" name="test1"></button>
<button id="id2" name="test2"></button>

3
  • Спасибо брат, очень помогло. 14 янв 2019 в 10:39
  • @AlisaBondarchuk, если данный ответ является ответом на Ваш вопрос, то отметье его галочкой слева от ответа. В будущем это может помочь людям при поиске аналогичного вопроса.
    – meine
    14 янв 2019 в 11:00
  • Ok, отметил, спасибо ! 14 янв 2019 в 11:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.