Вложенный цикл for возвращает неверный результат
Всем привет! Друзья, подскажите пожалуйста, ато я запутался: имеются три абзаца с текстом и кнопка. По нажатию на кнопку, нужно записать в начало текста каждого абзаца его нумерацию.
<p class = 'someText'>Some text</p>
<p class = 'someText'>Some text</p>
<p class = 'someText'>Some text</p>
<input id = 'buttonText' type = 'submit'>
А вот и сам код:
let numList = document.querySelectorAll('.someText');
let outputList = document.querySelector('#buttonText');
outputList.addEventListener('click', function() {
for (elem of numList) {
for (var i = 0; i < numList.length; i++) {
var n = i + 1;
numList[i].innerHTML = n + numList[i].innerHTML;
}
}
});
В итоге он мне выдает:
111Some text 222Some text 333Some text
Он делает больше итераций, чем нужно. Очень нужно понять этот момент. Помогите объяснить. Возможно имеется более лаконичный вариант. Заранее спасибо!
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
let numList = document.querySelectorAll('.someText');
let outputList = document.querySelector('#buttonText');
outputList.addEventListener('click', function() {
//for (elem of numList) {
for (var i = 0; i < numList.length; i++) {
var n = i + 1;
numList[i].innerHTML = n + numList[i].innerHTML;
}
// }
});
<p class = 'someText'>Some text</p>
<p class = 'someText'>Some text</p>
<p class = 'someText'>Some text</p>
<input id = 'buttonText' type = 'submit'>