Как добавить значения, которые хранятся в массиве, как textContent или innerText, к элементам div с тем же именем класса - PullRequest
Новая
       22

Как добавить значения, которые хранятся в массиве, как textContent или innerText, к элементам div с тем же именем класса

1 голос
/ 30 марта 2020

Я хочу, чтобы значения, хранящиеся в массиве, добавлялись к элементам div с помощью className .score. Есть 12 элементов и 12 значений. Пример первого элемента: <div class="score">15<div> и так далее. Код, который я пробовал, добавляет последнее значение массива ко всем элементам, это, конечно, не то, что я хочу. Спасибо. 

var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];

function addValue() {
   var e = document.querySelectorAll('.score')
   Array.from(e).forEach(el => {
      for (let value of nums) {
         el.textContent = value
      }
   })
}

addValue();

Ответы [ 3 ]

1 голос
/ 30 марта 2020

Вы можете использовать второй параметр forEach l oop (который является индексом массива), чтобы получить значение массива nums, так как оба массива имеют одинаковую длину.

Обратите внимание, что массив элементов, возвращаемый document.querySelectorAll, по умолчанию повторяем. Вам не нужно использовать Array.from.

Пример: 

(function() {
    var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];

    function addValue() {
        var e = document.querySelectorAll('.score')
        e.forEach((el, index) => {
            el.textContent = nums[index]
        });
    }
    addValue();
})()
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>

Или вы можете использовать метод обратного вызова Array.from для заполнения div.

Пример: 

(function() {
    var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];

    function addValue() {
        Array.from(
            document.querySelectorAll('.score'),
            (el, index) => el.textContent = nums[index]
        );
    }
    addValue();
})()
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
1 голос
/ 30 марта 2020

Возьмите второй параметр в forEach, индекс, по которому вы перебираете, чтобы определить, какой элемент в nums установить: 

document.querySelectorAll('.score').forEach((el, i) => {
  el.textContent = nums[i];
});
0 голосов
/ 30 марта 2020

Используйте класс c для l oop, 

var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];
var arr = document.querySelectorAll('.score');
for (i = 0; i < arr.length; ++i) {
  arr[i].textContent = nums[i];
}
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
<div class="score"></div>
...