inflearn logo
강의

Khóa học
Chia sẻ kiến thức

Bắt đầu phát triển web tương tác đúng cách

Video củng cố đoàn sự kiện

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

392

shinjs15h1198

10 câu hỏi đã được viết

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

Câu trả lời 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

101

1

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

0

150

1

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

0

127

1

animation이벤트 질문이요!

0

71

1

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

0

111

1

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

0

149

1

3d 뒤집기 추가효과

0

218

1

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

1

171

1

eventlistener 질문

0

149

1

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

0

168

1

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

1

191

1

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

0

266

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