페이징.페이지고정2 질문드립니다.

 안녕하세요 선생님

강의 리소스에는 li가 html에 작성되어있지만

저는 자바스크립트를 이용하여 section 갯수에 맞춰서 li도

그 갯수에 맞춰서 생성해주고 싶어서 반복문 코드를 짜봤습니다.

ex) section 갯수가 8개면 li 갯수도 8개로 자동생성

생성은 되었습니다. 그러나 아직 li의 인덱스를 받아오는 코드를 작성하진 않았어요

스크롤을 하였을 시 pageNum 의 i 값이

pageChangeFunc의 함수안에서 remove 혹은 add 가 작동되지 않습니다.

(오류가 스크롤 했을 시 뜹니다.)

<--- F12에서는 이렇게 뜹니다. --->

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

at pageChangeFunc (4.html:120:33)

at 4.html:114:17

저는 section 갯수에 맞춰서 li갯수를 생성하려고 appendChild를 사용하였습니다.

저의 부족한 지식으로 유추해본 생각이지만 li를 생성하고 난 뒤여서 스크롤이벤트가 안먹혀서 그런건지...

아니면 classList 가 작동이 안될까? 라는 생각이 드는데 잘 모르겠네요...

답을 원하지 않습니다만 힌트라도 주시면 감사하겠습니다.

<--- 제가 작성한 코드는 이렇습니다. --->

var section = document.getElementsByTagName('section'); var pointWrap = document.querySelector('.pointWrap'); var pointBtn = document.querySelectorAll('.pointWrap li'); var pageNum = 0; var totalNum = section.length; for(var s = 0; s < totalNum; s++){ var newli = document.createElement('li') pointWrap.appendChild(newli); } window.addEventListener('scroll', function(event){ var scroll = this.scrollY; for(var i = 0; i < totalNum; i++){ // if(scroll > section[i].offsetTop && // scroll < section[i].offsetTop + section[i].offsetHeight){ if(scroll > section[i].offsetTop - window.outerHeight/3 && scroll < section[i].offsetTop - window.outerHeight/3 + section[i].offsetHeight){ pageNum = i; break; } } pageChangeFunc() }); function pageChangeFunc(){ for(var z = 0; z < totalNum; z++){ section[z].classList.remove("active"); pointBtn[z].classList.remove("active"); } section[pageNum].classList.add("active"); pointBtn[pageNum].classList.add("active"); }

for(var s = 0; s < totalNum; s++){
     var liElement = document.createElement('li')
     pointWrap.append(liElement);
   }

var pointBtn = document.querySelectorAll('.pointWrap li');