3개의 문에서 질문드려요

감사합니다:) 또 배우고 가네요~ 추석 잘 보내세요!

3개의 문에서 질문드려요

DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=!, initial-scale=1.0"> title>Documenttitle> style> *{margin:0;padding:0;box-sizing: border-box;} ul{list-style-type:none;} #wrap { width:100vw; height:100vh; background-color:#eee; display:flex; align-items:center; justify-content:center; } .content{ width:30vw; height:30vw; border:1px solid #000; } .menu { display:flex; } .menu li{ width:25%; text-align:center; border-right:1px solid #fff; height:25px; } .menu li a{ display:block; color:#fff; background-color:rgb(109, 198, 240); height:25px; text-decoration:none; } .menu li.On a{ background-color:#000; } .menu li:last-child{ border-right:none; } .box { width:100%; height:calc(100% - 25px); position:relative; } .box .inner{ position:absolute; width:100%; height:100%; font-size:5vw; justify-content:center; display:flex; align-items:center; opacity:0; } .box .inner.Active{ opacity:1 } .box .inner.b01{ background-color:rgb(113, 156, 236); } .box .inner.b02{ background-color:rgb(236, 113, 195); } .box .inner.b03{ background-color:rgb(236, 199, 113); } .box .inner.b04{ background-color:rgb(236, 172, 113); } style> head> body> div id="wrap"> div class="content"> ul class="menu"> li >a href="#" class="btn"> 0menua>li> li>a href="#" class="btn"> 1menua>li> li>a href="#" class="btn"> 2menua>li> li>a href="#" class="btn"> 3menua>li> ul> ul class="box"> li class="inner b01 Active" data-index="0">content01li> li class="inner b02" data-index="1">content02li> li class="inner b03" data-index="2">content03li> li class="inner b04" data-index="3">content04li> ul> div> div> script> (function(){ const menuList = document.querySelector('.menu'); let currentItem; const content=document.querySelector('.box'); const inner = content.childNodes; console.log(inner); function handler(e){ const targetElem = e.target; // console.log(targetElem); if(currentItem){ currentItem.classList.remove('On'); } if(targetElem.classList.contains('btn')){ targetElem.parentNode.classList.add('On'); currentItem= targetElem.parentNode; } } menuList.addEventListener('click',handler); // data-index 추가 menuList.querySelectorAll(".btn").forEach(function (item, i) { item.dataset.index = i; console.log(i) if(content.childNodes.classList.contains('inner')){ content.childNodes.dataset.index[i].classList.add('Active') } }); })() script> body> html> 이렇게 쓰니 에러가 뜨네요~ ㅜㅜ 자식요소의 dataset중 index가 i 인 아이한테 클래스 붙여라라고 생각한건데 잘못된 점이 무었일까요

top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.

으 다 오타 때문이네요 감사해요!

1분이가 계속 한자리에만 생기는데요. info.xPos가 일분이에게 안들어가는거 같아요. 놓친부분이 있는거겠죠?

감사합니다!