inflearn logo
강의

Course
Instructor

Getting Started with Interactive Web Development

Event Delegation Reinforcement Video

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

392

shinjs15h1198

10 asked

0

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

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

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

Answer 5

1

studiomeal

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

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

0

shinjs15h1198

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

토글버튼을 따로 만들어서 접혔다 폈다할 수 있고, 첫 시작을 접힌채로 시작하게끔하는 것도 성공했는데... 버튼을 누르면 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>

0

studiomeal

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

그리고
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>

0

shinjs15h1198

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

toggle처럼 펼쳤다가 접혔다가 할 수 있는... 코드를 집어넣는다면 어떻게 될까요?

0

shinjs15h1198

제가 원래 하던 방법은

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"

}

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

왼쪽/오른쪽 동작시 딜레이 문제

0

93

1

변수 범위 관련 질문

0

106

1

perspective 문의

0

100

1

생성자 함수를 클래스 함수로 변경 하고 this 오류 관련

0

150

1

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

0

127

1

animation이벤트 질문이요!

0

71

1

resize handler에서 질문이 있습니다.

0

110

1

카드 뒤집힐 때 F가 보인 이유

0

149

1

3d 뒤집기 추가효과

0

217

1

전진! 3D 스크롤 21 강의 질문

1

171

1

eventlistener 질문

0

149

1

zMove 를 1000으로 설정하는 이유에 대하여.

0

168

1

[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

1

191

1

동적으로 html 생성 후 이벤트 위임 질문 있습니다.

0

265

1

rotateY()에서 deg에 따른 차이

0

197

1

코드 작성 순서

0

276

1

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

1

394

1

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

0

265

2

섹션5 자바스크립트 이벤트 다루기 질문

1

243

1

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

0

423

2

css 는 직접 작성을 해야하는걸까용?

0

326

1

translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

0

360

2

house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.

0

305

2

left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.

0

306

2