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 that you have read and understand our privacy policy and code of conduct.

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