shinjs15h1198

선생님 오늘따라 제가 질문이 많네요ㅠ 다름이 아니라 이것을 따로 적용해봤는데 문제는...어디서 걸친건지... 원래 적용되어야하는 이벤트 타겟위치를 잡는 함수가 작동을 안하네요!!!!
토글버튼을 따로 만들어서 접혔다 폈다할 수 있고, 첫 시작을 접힌채로 시작하게끔하는 것도 성공했는데... 버튼을 누르면 1,2,3 이렇게 떠야하는게 이제는 안되네요... 정말...끝없는..버그의 연속이..
<div style="color: #c5c8c6; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-weight: normal; font-size: 16px; line-height: 24px; white-space: pre;">
<div><script></div>
<div> var menu_state=false;</div>
<div> var menu = document.querySelector('.menu');</div>
<div> var menuBtn = document.querySelector('.menu-btn');</div>
<div> </div>
<div> function menuToggle() {</div>
<div> if(menu_state == false) {</div>
<div> menuHide();</div>
<div> menu_state = true;</div>
<div> } else if (menu_state == true) {</div>
<div> menuOpen();</div>
<div> menu_state = false;</div>
<div> }</div>
<div> }</div>
<div> function menuHide() {</div>
<div> menu.innerHTML = "";</div>
<div> }</div>
<div> function menuOpen() {</div>
<div> menu.innerHTML = htmlStr;;</div>
<div> }</div>
<div> menuBtn.addEventListener("click", menuToggle);</div>
<div> </div>
<div> const htmlStr = `</div>
<div> <button class="menu-btn" data-value="1"></div>
<div> <img src="./images/ilbuni_1.png" alt="" class="icon"></div>
<div> 일분이 1</div>
<div> </button></div>
<div> </div>
<div> <button class="menu-btn" data-value="2"></div>
<div> <img src="./images/ilbuni_2.png" alt="" class="icon"></div>
<div> 일분이 2</div>
<div> </button></div>
<div> </div>
<div> <button class="menu-btn" data-value="3"></div>
<div> <img src="./images/ilbuni_3.png" alt="" class="icon"></div>
<div> 일분이 3</div>
<div> </button></div>
<div> `;</div>
 
<div> (function () {</div>
<div> const menu = document.querySelector('.menu');</div>
<div> </div>
<div> function clickHandler(e) {</div>
<div> let elem = event.target;</div>
<div> while (!elem.classList.contains('menu-btn')) {</div>
<div> elem = elem.parentNode;</div>
<div> if (elem.nodeName == "BODY") {</div>
<div> elem=null;</div>
<div> return;</div>
<div> }};</div>
 
<div> console.log(elem.dataset.value); </div>
<div> }})();</div>
<div> </div>
<div> </script></div>
</div>

마지막에 클릭하면 창이 뜨게 하는 것에서 쓰신 ''

앗 정말 감사합니다ㅜㅜㅜ 응용으로 색하나 더 추가하게 해봤어요!!! 혼자해보다가 너무 스트레스였는데 감사해요!!

<div style="color: #c5c8c6; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-weight: normal; font-size: 16px; line-height: 24px; white-space: pre;">
<div>const ballElem = document.querySelector('.ball');</div>
<div> let change = 1;.</div>
 
<div> window.addEventListener('click', function(e) { </div>
<div> ballElem.style.transform = 'translate(' + (e.clientX - 15) +'px, ' + (e.clientY-15) +'px)';</div>
 
<div> if(change == 1) {</div>
<div> ballElem.classList.add('end');</div>
<div> change = 2;</div>
<div> }else if (change == 2) {</div>
<div> ballElem.classList.remove('end');</div>
<div> ballElem.classList.add('end2');</div>
<div> change = 3;</div>
<div> }else {</div>
<div> ballElem.classList.remove('end2');</div>
<div> change = 1;</div>
<div> }</div>
<div> });</div>
</div>

이상황에서 어떻게해야 색깔을 바꿀 수 있을까요?

앗 감사합니다! 혹시 이 상태에서는 어떻게 코드를 짜야 원래대로 돌아갈까요? 클릭 전 상태로!
toggle처럼 펼쳤다가 접혔다가 할 수 있는... 코드를 집어넣는다면 어떻게 될까요?

제가 원래 하던 방법은
var menustate = false;
function menuToggle() { if (menustate === false) { menuHide(); menustate =true; } else if (menustate === true) { menuopen(); menustate = false; }
function menuHide() {
document.querySelector(".menu").style.display = "none";
}
function menuOpen() {
document.querySelector(".menu).style.display = "flex"
}

이런식으로 &nbsp;배워서 하다가ㅜㅜ 일분코딩님... 방법으로 배우다보니 약간 치환하기가 어렵네요...&nbsp;

shinjs15h1198

Posts