질문드립니다.
강의 잘 듣고 있습니다.
가위바위보 게임에서 텍스트로 한것을 가위바위보 이미지로 하는 경우는 어떻게 해야 하나요?
이렇게 되어 있는 것을....
<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);
이 부분을 어떻게 바꾸어 하는지....Answer 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);로직은 얼마든지 바꿀 수 있습니다. (그냥 클래스 이름으로 가져와서 비교를 한다던지 등) 하지만 기존 코드를 변경하지 않는 선에서 버튼만 이미지로 변경하시려면 이 방법이 제일 간단한 듯 합니다. ^^
3강 질문
0
18
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
29
1
2강 nodejs 3단계 설명 질문
0
33
1
imagesLoaded에 관한 질문
0
19
2
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
38
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
최근 코테, 과제 테스트 트렌드
0
69
2
lucide react 아이콘 설치
0
46
2
17강 zustand store 서버에서 생성
1
37
1
문의관련 문의
0
44
2
next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?
0
56
2
76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.
0
48
2
ai 도구 질문
0
31
1
저는 왜 콘솔에서 props가 한 줄만 찍히나요?
0
47
1
렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
55
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
02-04 layout.tsx 구조가 달라요
0
60
2
불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?
0
54
1
모듈파트 초반 진행중 오류
0
186
1
기초 강의 #18 모듈
0
381
1
QA 자동화 테스트할 때 자바스크립트와의 연계성
0
869
1
하나만 더 질문드려요
0
531
1