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

인터랙티브 웹 개발 제대로 시작하기

이벤트 위임 보강 영상

작성

286

제가 아무리... 비슷한... ''인용구를 찾아도 실행이 안되네요ㅠㅠ

''도해보고 ""도 해보고 도 ´´ 해봤는데 안되네요ㅠㅠ

window.addEventListener('click', () => {
const htmlStr = "
 <button class="menu-btn" data-value="1">
<img src="./images/ilbuni_1.png" alt="" class="icon">
 <span class="btn-label">일분이 1</span>
 </button>

<button class="menu-btn" data-value="2">
 <img src="./images/ilbuni_2.png" alt="" class="icon">
 <span class="btn-label">일분이 2</span>
 </button>

 <button class="menu-btn" data-value="3">
 <img src="./images/ilbuni_3.png" alt="" class="icon">
 <span class="btn-label">일분이 3</span>
 </button>
 ";
 menu.innerHTML = htmlStr; 

 });

인터랙티브 웹 javascript HTML/CSS

답변 5

1분코딩

지식공유자

1. htmlStr에 쓰인 부호는
물결(~)키과 같이 있는 `(backtick)이 맞습니다. 혹시 한글로 되어있다면 영문으로 전환해서 한번 해보세요~
참고 https://www.youtube.com/watch?v=OKSeTjcEU1U

2. 요소의 시각처리에 정답은 없으니 편한 방법으로 하세요~ㅎㅎ
보통 단순하게 정해진 동작이라면 CSS 클래스로 정의해두고 스크립트에서 클래스만 조작하는 편이 쉽고,
그때그때 위치 등의 계산이 필요한 경우라면 자바스크립트의 style 객체를 직접 조작하는 것이 좋습니다.

신준석

질문자

선생님 오늘따라 제가 질문이 많네요ㅠ 다름이 아니라 이것을 따로 적용해봤는데 문제는...어디서 걸친건지... 원래 적용되어야하는 이벤트 타겟위치를 잡는 함수가 작동을 안하네요!!!!

토글버튼을 따로 만들어서 접혔다 폈다할 수 있고, 첫 시작을 접힌채로 시작하게끔하는 것도 성공했는데... 버튼을 누르면 1,2,3 이렇게 떠야하는게 이제는 안되네요... 정말...끝없는..버그의 연속이..

<script>
 var menu_state=false;
 var menu = document.querySelector('.menu');
 var menuBtn = document.querySelector('.menu-btn');
 
 function menuToggle() {
 if(menu_state == false) {
 menuHide();
 menu_state = true;
 } else if (menu_state == true) {
 menuOpen();
 menu_state = false;
 }
 }
 function menuHide() {
 menu.innerHTML = "";
 }
 function menuOpen() {
 menu.innerHTML = htmlStr;;
 }
 menuBtn.addEventListener("click", menuToggle);
 
 const htmlStr = `
 <button class="menu-btn" data-value="1">
 <img src="./images/ilbuni_1.png" alt="" class="icon">
 <span class="btn-label">일분이 1</span>
 </button>
 
 <button class="menu-btn" data-value="2">
 <img src="./images/ilbuni_2.png" alt="" class="icon">
 <span class="btn-label">일분이 2</span>
 </button>
 
 <button class="menu-btn" data-value="3">
 <img src="./images/ilbuni_3.png" alt="" class="icon">
 <span class="btn-label">일분이 3</span>
 </button>
 `;

 (function () {
 const menu = document.querySelector('.menu');
 
 function clickHandler(e) {
 let elem = event.target;
 while (!elem.classList.contains('menu-btn')) {
 elem = elem.parentNode;
 if (elem.nodeName == "BODY") {
 elem=null;
 return;
 }};

 console.log(elem.dataset.value); 
 }})();
 
 </script>

1분코딩

지식공유자

작성하신 코드에 살짝만 추가해보면 아래처럼 되겠네요~

그리고
if (menustate === false)는 if (!menustate)
if (menustate === true)는 if(menustate)
이런 식으로 간단하게도 많이 표현합니다^^

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Click Sample</title>
    <style>
        .menu {
            background: dodgerblue;
        }
    </style>
</head>
<body>
    <button class="menu-btn">MENU TOGGLE</button>
    <div class="menu">MENU</div>

    <script>
        var menustate = false;
        var menuBtn = document.querySelector(".menu-btn");
        var menu = document.querySelector(".menu");

        function menuToggle() {
            if (menustate === false) {
                menuHide();
                menustate = true;
            } else if (menustate === true) {
                menuOpen();
                menustate = false;
            }
        }

        function menuHide() {
            menu.style.display = "none";
        }

        function menuOpen() {
            menu.style.display = "flex";
        }

        menuBtn.addEventListener("click", menuToggle);
    </script>
</body>
</html>

신준석

질문자

앗 감사합니다! 혹시 이 상태에서는 어떻게 코드를 짜야 원래대로 돌아갈까요? 클릭 전 상태로!

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"

}

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

인프런 커뮤니티 질문&답변

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