Как перебрать 4 элемента и взять оттуда значения? JavaScript

Question

Не могу перебрать 4 элемента div, не пойму из за чего возникает ошибка. Нужно перебрать 4 div с помощью цикла и вывести их значение в out-11

function t() {
    let out = '';
    let div = document.querySelectorAll('.div-11');
    let i = 0;
    while (i <= div.length) {
        out = out + div[i].innerHTML;
        i++;
    }
    document.querySelector('.out-11').innerHTML = out;
}

document.querySelector('.b-11').onclick = t;

            <div class="div-11">one</div>
            <div class="div-11">3</div>
            <div class="div-11">4</div>
            <div class="div-11">two</div>
            <button class="button-primary b-11">Task-11</button>
            <div class="out-11"></div>

Answer 1

Сделайте обычный перебор элементов по их количеству.

    function t() {
        let out = '';
        let div = document.querySelectorAll('.div-11');
        for (let i=0;i<div.length;i++){
            out = out + div[i].innerHTML;
        }
        document.querySelector('.out-11').innerHTML = out;
    }

    document.querySelector('.b-11').onclick = t;

<div class="div-11">one</div>
<div class="div-11">3</div>
<div class="div-11">4</div>
<div class="div-11">two</div>
<button class="button-primary b-11">Task-11</button>
<div class="out-11"></div>

Answer 2

Всё просто

$('.b-11').click(()=>{ // событие клик по кнопке с классом .b-11
    const els = $('body').find('div.div-11'); // исчем твои элементы
    let result = ''; // создаем строку для суммы\ответа
    
    for(let el of els){
        result += $(el).text() + ' '; // собираем результат
    }
    
    $('.out-11:first').text(result); // выводим результат
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-11">one</div>
<div class="div-11">3</div>
<div class="div-11">4</div>
<div class="div-11">two</div>
<button class="button-primary b-11">Task-11</button>
<div class="out-11"></div>

Answer 3

Убери знак = из цикла, происходит лишняя итерация и в итоге ошибка.

Так как элементов 4 а итераций 5

function t() {
  let out = '';
  let div = document.querySelectorAll('.div-11');
  let i = 0;
  while (i < div.length) {
    out = out + div[i].innerHTML;
    i++;
  }
  document.querySelector('.out-11').innerHTML = out;
}

document.querySelector('.b-11').onclick = t;

<div class="div-11">one</div>
<div class="div-11">3</div>
<div class="div-11">4</div>
<div class="div-11">two</div>
<button class="button-primary b-11">Task-11</button>
<div class="out-11"></div>

БЛОГ НА HUSL

Как перебрать 4 элемента и взять оттуда значения? JavaScript

Ответы (3 шт):