-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
선생님 여쭤볼때가 없어서요 ㅠㅠ 질문좀드릴게요 ㅠ
20.09.19 22:15 작성 조회수 119
0
(function () {
const Form = document.querySelector('form');
let targetElem;
let currentItem;
function clickHandler(e) {
targetElem = e.target;
currentItem = targetElem.parentNode.parentNode;
const black = document.querySelector('.black')
if (targetElem.classList.contains('button1')) {
currentItem.classList.add('black')
}
if (targetElem.classList.contains('button2')) {
currentItem.classList.add('gold')
}
}
Form.addEventListener('click', clickHandler)
})()
제가 버튼 1 2 클릭한것마다 body에 백그라운드색을 바꾸고
싶은데요; 이벤트 함수는 많이쓰면 안좋다고 하셔서
위임 식으로 target을 써서 하려구 하는데 이렇게 코드를치면
한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를
고쳐야 할까요 ㅠ?
답변을 작성해보세요.
1
1분코딩
지식공유자2020.09.20
currentItem.classList.remove('gold')
currentItem.classList.add('black')
...
currentItem.classList.remove('black')
currentItem.classList.add('gold')
이런 식으로 add 하기 전에 remove로 해당되지 않는 클래스를 제거해 주세요~
add만 하고 remove는 해주지 않아서 동작이 안되는 것이거든요.
0
0
김동
질문자2020.09.20
<h1>JavaScript</h1>
<form>
<input class="button1" type="button" value="000">
<input class="button2" type="button" value="fff">
</form>
<script>
(function () {
const Form = document.querySelector('form');
let targetElem;
let currentItem;
function clickHandler(e) {
targetElem = e.target;
currentItem = targetElem.parentNode.parentNode;
// const black = document.querySelector('.black')
if (targetElem.classList.contains('button1')) {
currentItem.classList.add('black')
}
if (targetElem.classList.contains('button2')) {
currentItem.classList.add('gold')
}
}
Form.addEventListener('click', clickHandler)
})()
</sc
폼안에 버튼 두개넣엇습니다. ㅠ
0
답변 4