질문드립니다.
강의 잘 듣고 있습니다.
가위바위보 게임에서 텍스트로 한것을 가위바위보 이미지로 하는 경우는 어떻게 해야 하나요?
이렇게 되어 있는 것을....
<button class="scissors">가위</button>
<button class="rock">바위</button>
<button class="paper">보</button>
<button class="scissors"><img src="img/game1.png" alt="가위"></button>
<button class="rock"><img src="img/game2.png" alt="바위"></button>
<button class="paper"><img src="img/game3.png" alt="보"></button>console.log(event.target.innerText);
이 부분을 어떻게 바꾸어 하는지....Câu trả lời 1
0
안녕하세요 gangsugi님.
기존 코드는 버튼의 텍스트를 가져와서 비교를 하기 때문에 innerText 값을 가져왔었습니다. 하지만 질문 주신 것처럼 텍스트는 사용하지 않고 버튼을 이미지로 변경하고 싶으시다면, dataset 기능을 활용하여 요소에 값을 넣고 가져다 비교하는 방법으로 변경해보세요.
dataset 사용법
다음 코드와 같이 data-[원하는이름]="값" 으로 값을 입력하세요.
<button class="scissors">
<img src="img/game1.png" alt="가위" data-choice="가위" />
</button>
<button class="rock">
<img src="img/game2.png" alt="바위" data-choice="보" />
</button>
<button class="paper">
<img src="img/game3.png" alt="보" data-choice="바위" />
</button>그 다음에 자바스크립트에서 접근하실 때는 다음 코드처럼 dataset.[정했던이름]으로 접근하실 수 있습니다.
const user = event.target.dataset.choice;
console.log(user);로직은 얼마든지 바꿀 수 있습니다. (그냥 클래스 이름으로 가져와서 비교를 한다던지 등) 하지만 기존 코드를 변경하지 않는 선에서 버튼만 이미지로 변경하시려면 이 방법이 제일 간단한 듯 합니다. ^^
10월 15일 삭제예정 강의 문의
0
11
0
강의제목에 10/15일 삭제라고 나와있는데,
0
45
1
스크립트 영상 미일치
0
70
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
53
2
강의 설명 중에 헷갈리는 것이 있네요
0
49
1
수업자료 관련 문의
0
65
3
1강 동영상 재생 오류
1
65
2
Composition단계에서 `Layer`는 누가 만드는지
0
41
1
Strict Mode 예시 질문!
0
58
2
수업이 안보여요
0
62
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
60
1
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
85
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
105
2
윈도우즈 환경에서 진행중입니다.
0
59
2
4강 카드뉴스 자동화 자료
6
124
1
라이브 강의 영상 녹화본이 있을까요?
0
100
1
인증이 늦었습니다ㅜㅜ 확인부탁드립니다
0
89
1
스웨거 접속이 안되는데 확인 부탁드립니다.
0
62
1
설명이 잘못된거같습니다.
1
72
2
수강자료 다운로드 관련 문의
0
107
2
모듈파트 초반 진행중 오류
0
231
1
기초 강의 #18 모듈
0
413
1
QA 자동화 테스트할 때 자바스크립트와의 연계성
0
920
1
하나만 더 질문드려요
0
569
1