• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

20.06.25 07:32 작성 조회수 148

0

저번 수업에서 if절을 쓰면서 했던 것처럼 remove하고 하려했는데 생각보다 쉽지 않네요ㅠ 한 번 할 때는 색이 바뀌고 다시 한 번 클릭하면 red로 돌아갔다가 또 클릭했을땐 blue로 바뀌려면 어떤 걸 추가해야할까요?

ballElem.addEventListener('transitionend', function() {
let Change = false;

if(Change == false) {
ballElem.classList.add('end');
Change = true;
} else if (Change = true) {
ballElem.classList.remove('end');
}
});

답변 3

·

답변을 작성해보세요.

1

아래와 같이 한번 해보세요~
change같은 변수는 상태를 저장해야하기 때문에, 이벤트핸들러 함수 바깥에서 선언이 되어야합니다^^
함수 안에서 선언되면 클릭할때마다 새로운 변수로 생성이 되는거라 값 보존이 안되거든요~

<script>
        const ballElem = document.querySelector('.ball');
        let change = false;

        window.addEventListener('click', function (e) {
            ballElem.style.transform = 'translate(' + (e.clientX - 15) + 'px, ' + (e.clientY - 15) + 'px)';

            if (change == false) {
                ballElem.classList.add('end');
                change = true;
            } else {
                ballElem.classList.remove('end');
                change = false;
            }
        });
    </script>

0

👍👍👍 ^^

0

신준석님의 프로필

신준석

질문자

2020.06.25

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

const ballElem = document.querySelector('.ball');
let change = 1;.

window.addEventListener('click', function(e) {
ballElem.style.transform = 'translate(' + (e.clientX - 15) +'px, ' + (e.clientY-15) +'px)';

if(change == 1) {
ballElem.classList.add('end');
change = 2;
}else if (change == 2) {
ballElem.classList.remove('end');
ballElem.classList.add('end2');
change = 3;
}else {
ballElem.classList.remove('end2');
change = 1;
}
});