문제는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = ____; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
</script>
</body>
</html>
이중에서 function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = ____; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
을 구해야 한다.
화면에는 아메리카노와 카페라떼 버튼이 있고, "버튼을 누를 때, 예를 들어 아메리카노를 클릭하셨습니다." 라는 식으로 콘솔에 출력되어야 한다.
힌트가 있다. 바로
function handleClick(event) {
console.log(event);
}를 입력해보는 것, 그럼 그 상태에서 둘 중 아무버튼이나 버튼을 누르면..
target:button 이 보인다. 버튼을 얻어냈다.
다시 문제를 보자.
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = ____; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}빈칸에 들어갈 경로는 event.target.textContent 가 되겠다.
왜냐고? 문자열을 받아와야 하니까!
잘 출력이 된다~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick(event) {
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;
//버튼이 눌릴때 handleClick함수가 돌아간다
//이벤트가 일어날때는, 함수를 작성하면은 자동적으로 이벤트에 대한 인자가 들어온다.
//이벤트 객체를 사용할떄, 어떤 값을 뽑아내고 싶을 때
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| Object(= 객체, 서로 연관된변수와 함수를 그룹핑하고 이름을 붙인것) (0) | 2023.03.11 |
|---|---|
| Pull Request (0) | 2023.03.09 |
| DOM 기초개요 (0) | 2023.03.07 |
| 자바스크립트 기초 문법 헷갈리는 것 모음집 (0) | 2023.03.07 |
| DOM 다루기 (CRUD + append) (0) | 2023.03.07 |
