• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

20.06.16 08:48 작성 조회수 208

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;

});
course-thumbnail

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

이벤트 위임 보강 영상

강의실 바로가기

답변 5

·

답변을 작성해보세요.

1

1분코딩님의 프로필

1분코딩

지식공유자

2020.06.16

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

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

0

신준석님의 프로필

신준석

질문자

2020.06.25

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

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

1분코딩님의 프로필

1분코딩

지식공유자

2020.06.16

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

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

신준석님의 프로필

신준석

질문자

2020.06.16

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

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

0

신준석님의 프로필

신준석

질문자

2020.06.16

제가 원래 하던 방법은

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"

}

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

이 글과 비슷한 Q&A