자바스크립트 forEach 질문드립니다 선생님들

Question

안녕하세요 자바스크립트 공부중인 코딩왕초보인데 querySelectAll해서 button요소를 다불러와서 forEach에 toggle적용시켜서 버튼 전부 누르면 색바뀌게 하고싶은데 forEach메소드 자체를 잘 이해하지 못하겠습니다. 고수님들 도와주세요ㅜ const actionBtns &#61; document.querySelectorAll('.actions li > buttons'); actionBtns.forEach(actionBtn &#61;> { actionBtn.classList.toggle('active') }) &#43; 자바스크립트에서 document.adddEventListener('DOMontentLoaded') 라는걸 선언?하고 하시는 분도 있던데 이건 'JS를 마지막에 실행시킨다'라고 이해하면 되는건가요?

초보자1212 · Answer

forEach 함수는 actionBtns 와 같이 배열 데이터에서 사용할 수 있는 함수인데forEach 는 배열의 각 요소를 하나씩 꺼내서 개발자가 forEach 안에 넣은 함수에 차례대로 인자값으로 넘겨줍니다 [1, 2, 3, 4].forEach(d &#61;> { console.log(d)}) 를 실행하면 콘솔 로그가 1부터 4까지 총 4번이 출력됩니다d 의 값은 맨 처음에는 숫자 1, 그 다음은 숫자 2, 숫자 3, 마지막으로 숫자 4가 들어갑니다 (배열의 요소를 처음부터 순서대로 하나씩 넣어줍니다) 왜 이름이 &#34;forEach&#34; 인지 궁금하실 수도 있을 듯 하여 제 추측을 말씀드려보자면저렇게 안에 넣어주는 함수를 &#34;콜백&#34; 함수라고 부릅니다.A callback function for each element of an array. &#61;> forEach The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.DOMContentLoaded 의 설명은 위에 자세히 나와 있습니다.아직 자바스크립트의 깊은 이해도를 갖고 계시지 않을테니 조금 더 쉽게 말씀드리자면&#34;css, 이미지 파일과 같은 다른 자료와 상관없이 HTML 이 로드가 완전히 되면 실행되는 이벤트&#34;정도로 보시면 될 것 같습니다.

Haileyang · Answer

근데 저 궁금한게 querySelectorall 에 li 안에있는 buttons라고하셨는데 클래스명인건가요?

초보자1212 · Answer

그건 오타같네요..ㅎ

HJOW · Answer

아마 오타이지 않을까요? s를 빼거나 .을 붙이거나

Haileyang · Answer

글쿤요 ^^;; 저는 DOMContentLoaded 만 물어보셔서 저렇게도 쓸 수 있나 직접해보고있었네요. button요소를 다불러와서 forEach에 toggle적용시켜서 버튼 전부 누르면 색바뀌게 하고싶은데버튼 아무거나 누르면 다른 버튼들 전체가 색바뀌면되나요? 아니면 클릭한 아이만 바뀌면 되나요? 그리고 li 안에 버튼이 많은거죠? 각 li마다 버튼이 있는게 아니라 제가 이해하기로는 아래 코드같은데 아니면 말씀해주세요! Document 작성해주신 코드에서는 버튼을 누르면 이벤트 발생을 원하셨는데,"actionBtn 파라미터를 클릭했을 때" 라는 코드가 없어서 안되는거에요!const actionBtns = document.querySelectorAll('.actions li > button'); actionBtns.forEach(actionBtn => { actionBtn.classList.toggle('active') })

식은피자 · Answer

아 buttons 오타입니다ㅜ 헷갈리게해서 죄송합니다ㅠ

식은피자 · Answer

저는 버튼 여러가지가 있지만 하나누르면 그 하나만 색이 바뀌게 하고싶어요!

요렇게 있습니다!

식은피자 · Answer

CSS에는 .active { color: skyblue;} 요렇게 있습니다

Haileyang · Answer

위의 코드로는 안되실까요?

자바스크립트 forEach 질문드립니다 선생님들

9개의 답변

#toggle 목록