Как заполнить несколько элементов на странице (которые имеют один и тот же класс) одинаковыми данными? - PullRequest
Новая
       62

Как заполнить несколько элементов на странице (которые имеют один и тот же класс) одинаковыми данными?

0 голосов
/ 01 ноября 2019

Я понимаю, как отобразить текущий год и передать его через идентификатор, но идентификатор, конечно, будет отображаться только один раз. Мне нужно иметь возможность отображать его несколько раз по всему сайту.

Как мне это сделать? 

//get year 
var yyyy = new Date().getFullYear();

currYear.innerHTML = yyyy;


//trying to display as a class
document.getElementsByClassName('thisYear')[0] = yyyy;
<span id="currYear"></span>
<span class="thisYear"><span>

Ответы [ 3 ]

3 голосов
/ 01 ноября 2019

Насколько я понимаю, вы пытаетесь добавить текущий год к нескольким элементам в своем HTML? В настоящее время вы назначаете его только первому ([0]). Вы можете проанализировать каждый элемент с классом thisYear и добавить к ним текущий год. 

//get year 
var yyyy = new Date().getFullYear();

//trying to display as a class
//the document.getElementByClassName returns a htmlCollection. not an array directly.
//https://stackoverflow.com/a/3871602/5784924
Array.from(document.getElementsByClassName('thisYear')).forEach(function(element) {
  element.innerHTML = yyyy;
});
<div class="thisYear">this year</div><br>
<div class="thisYear">this year</div><br>
<div class="notThisYear"> not this year</div><br>
<div class="notThisYear">not this year</div><br>
<div class="thisYear"></div>

PS Этот ответ отражает только то, что спросил OP. Если вы хотите увидеть что-то более современное и совместимое с браузером, см. Скотт Маркус 'ответ .

2 голосов
/ 01 ноября 2019

document.getElementsByClassName('thisYear')[0] = yyyy; пытается установить элемент DOM, возвращаемый из вызова в год, а не какое-либо свойство элемента DOM в год.

Чтобы ваш код работал, «быстрое исправление»чтобы добавить .innerHTML к вашей строке: 

document.getElementsByClassName('thisYear')[0].innerHTML = yyyy;

Однако .getElementsByClassName() (наряду с аналогичными API 1990-х годов, такими как getElementsByTagName(), getElementsByName() и другими) больше не должно бытьиспользуемый. Я писал об этом и о идее добавления индекса в конец метода, который возвращает список узлов здесь .

Вместо этого используйте современный, соответствующий стандартам.querySelector() и .querySelectorAll(), а затем вам нужно будет перебрать коллекцию и изменить элементы по отдельности.

См. Дополнительные комментарии: 

//get year 
var yyyy = new Date().getFullYear();


// .querySelectorAll returns a node list, which is not an actual Array implementation.
// IE doesn't support calling .forEach on node lists, so if you need to support IE
// you'll need to convert the node list into an aray in order to call .forEach and you'll
// need to do it in a way that IE understands (not Array.from()):

// Array.prototype.slice.call(document.querySelectorAll('.thisYear')).forEach(function(element) {

// But, if you are not concerned with IE, you can call .forEach() directly on the node list
document.querySelectorAll('.thisYear').forEach(function(element) {
  // When the content you wish to update doesn't contain any HTML, don't use .innerHTML
  // which has performance and potential security implications, use .textContent instead
  element.textContent = yyyy;
});
div { margin-bottom:1em; }
<div class="thisYear">this year</div>
<div class="thisYear">this year</div>
<div class="notThisYear"> not this year</div>
<div class="notThisYear">not this year</div>
<div class="thisYear"></div>
0 голосов
/ 01 ноября 2019

Полагаю, вы пытаетесь назначить текущую дату нескольким элементам одного класса, если это так. Пожалуйста, взгляните на этот пример ниже. 

var items = document.getElementById( 'items' ),
    divs = document.getElementsByClassName( 'count' );

[].slice.call( divs ).forEach(function ( div ) {
    div.innerHTML = items.innerHTML;
});

Источник: Замените innerHTML всех элементов div на один и тот же класс

...