Как сделать функцию-счетчик для блока?

Question

Как сделать функцию-счетчик для блока?

Gool Ученик (210), на голосовании 1 год назад

Нужно сделать функцию-счетчик, для блока.

Как сделать функцию-счетчик для блока?

Структура HTML левого блока, где нужно менять цифры "number"

В JS данный блок создается вот так

   // --------------LEFT BLOCK------------------------- 
  // новый блок left 
  let newDiv = document.createElement("div"); 
  newDiv.className = "left__box-text"; 
  left__box.appendChild(newDiv); 
  let number = document.createElement("p"); 
  number.className = "number"; 
  number.innerText = "2"; 
  newDiv.appendChild(number); 
  // let number = newDiv.getElementsByClassName("number").length + 1; 
  // newDiv.appendChild(document.createTextNode(`${number}`)); 
 
  // в блоке left, создаем span 
  let leftTextSpan = document.createElement("span"); 
  leftTextSpan.classList = "left__text"; 
  leftTextSpan.innerText = textInput; 
  newDiv.appendChild(leftTextSpan);

Пытался создать переменную let count;
И ее плюсовать number.innerText = count + 1;
Но выводится все как на скриншоте.
Не пойму куда и как копать.

Answer 1

HTML-код:

JS-код:

 // Подхватываем левую колонку 
 
const leftBox = document.querySelector('.left__box'); 
 
// Создаем цикл для работы с элементами 
// Число итераций (второй аргумент) будет равен количеству элементов 
 
for (let i = 1; i <= 5; i++) { 
 
   // Создаем новые блоки 
   const newDiv = document.createElement("div");  
   const number = document.createElement("p");  
   const leftTextSpan = document.createElement("span");  
 
   // Добавляем классы 
   newDiv.className = "left__box-text";  
   number.className = "number";  
   leftTextSpan.classList = "left__text";  
 
   // Добавляем содержимое 
   // Для number используем счетчик итераций 
   number.innerText = i; 
   leftTextSpan.innerText = 'Текст'; 
 
   // Добавляем элементы на страницу и друг в друга 
   leftBox.appendChild(newDiv);  
   newDiv.appendChild(number);   
   newDiv.appendChild(leftTextSpan); 
 
}

Итоговая структура выглядит вот так в DOM-дереве:

Этого эффекта ты пытался добиться? Строчки будут всегда иметь нумерацию в соответствии с общим индексом.

Answer 2

нормально бы сделал, например так https://codepen.io/norbert123/pen/vYaXLab тогда бы само все считалось