#javascript #html #loops #dom-events
#язык JavaScript #HTML #петли #дом-события
Вопрос:
lt;!DOCTYPE htmlgt; lt;html style="background-color: #D1D1D1 "gt; lt;headgt; lt;meta charset="utf-8" /gt; lt;link rel="stylesheet" type="text/css" href="./main.css" /gt; lt;/headgt; lt;body id="body"gt; lt;h1 id="headerTitle"gt;lt;/h1gt; lt;divgt; lt;p id="header"gt;November 29thlt;/pgt; lt;/divgt; lt;divgt; lt;p id="header"gt;November 29thlt;/pgt; lt;/divgt; lt;divgt; lt;p id="header"gt;November 29thlt;/pgt; lt;/divgt; lt;script src="./main.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;
Я пытаюсь пройтись по телу, войти в каждый раздел и изменить текст 29 ноября. Самое близкое, что у меня получилось, — это вот это:
var body = document.getElementsByTagName("div") for (i = 0; i lt; body.length; i ) { document.getElementById("header").innerHTML = "Hello World!"; }
но это меняет только первый div и останавливается.
Комментарии:
1. Несколько элементов не могут совместно использовать один и тот же идентификатор.
Ответ №1:
Это только изменение первого div
, так как идентификатор должен принадлежать только одному элементу, поэтому он останавливается после того, как найдет этот элемент. Измените поле идентификатора в p
тегах на class
, и вы могли бы использовать
let body = document.getElementsByClassName() for (let element of body) { element.innerHTML = "..." }
Ответ №2:
Как уже упоминалось, у вас не должно быть более 1 элемента с одинаковым идентификатором. Изменив идентификаторы на класс, этот код должен работать:
[...document.querySelectorAll('.header')].map((elem) =gt; elem.textContent = 'Hello World!');
Ответ №3:
//Просто чтобы изменить данные в div, вы можете сделать это
var div_s = document.getElementsByTagName(«div»)
for (i = 0; i lt; div_s.length; i ) { div_s[i].innerHTML = "Hello World!"; }
или чтобы изменить данные в p, вам нужны уникальные идентификаторы для каждого тега, как показано ниже.
lt;div title = "header1"gt; lt;p id="header1"gt;November 29thlt;/pgt; lt;/divgt; lt;div title = "header2"gt; lt;p id="header2"gt;November 29thlt;/pgt; lt;/divgt; lt;div title="header3"gt; lt;p id="header3"gt;November 29thlt;/pgt; lt;/divgt; lt;scriptgt; var divs = document.getElementsByTagName('div') for (i = 0; i lt; divs.length; i ) { document.getElementById(divs[i].title).innerHTML = "Hello World!"; } lt;/scriptgt;