인프런 커뮤니티 질문&답변
작성한 질문수
이상황에서 어떻게해야 색깔을 바꿀 수 있을까요?
작성
·
245
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
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
신준석
질문자
앗 정말 감사합니다ㅜㅜㅜ 응용으로 색하나 더 추가하게 해봤어요!!! 혼자해보다가 너무 스트레스였는데 감사해요!!
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;
}
});