JS : ForEach 내부 for 루프

Question

div의 내부에 루프를 사용하여 4 canvas 개의 요소를 만들려고합니다.

const wavePart = document.querySelectorAll('.waves'); 
wavePart.forEach(element => { 
    for (i; i < 4; i += 1) { 
    let can = document.createElement('canvas'); 
    element.appendChild(can); 
    } 
}); 

이 코드에만 wavePart 제 4 내부 캔버스 생성 만이 수행되지 루프를 통해 모든 콘테이너 : 여기

샘플 코드이다. 내가 뭔가 잘못하고 있는거야?

Answer 1

예, 위치 : i에

1. 는 의지

   가 일부 포함 된 코드에 의해 정의되는, 그리고

2. 는 루프에 i의 초기 값을 설정하지

결과적으로 은 첫 번째 forEach 콜백 이후에 4에 남고, 이후의 모든 c allbacks이면 i < 4은 항상 그 지점에서 거짓이므로 for 루프 본문이 실행되지 않습니다. 당신은 내가 0으로 초기화하는 것을 잊었다

const wavePart = document.querySelectorAll('.waves'); 
wavePart.forEach(element => { 
    for (let i = 0; i < 4; i += 1) { 
    // ^^^^^^^^^ 
    let can = document.createElement('canvas'); 
    element.appendChild(can); 
    } 
});