변경버튼을 누르면 수지 ↔ 아이유가 되는 코드를 만들다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="name">
<button id="btn">변경!</button>
<img src="https://img.allurekorea.com/allure/2022/11/style_636df79253f91-1136x1200.png" width="200px">
<script>
// 수지사진
let url1 = 'https://img.allurekorea.com/allure/2022/11/style_636df79253f91-1136x1200.png'
// 아이유사진
let url2 = 'https://cdn.mhns.co.kr/news/photo/201710/80596_134727_1149.png'
// STEP 1. "변경"버튼클릭시 사용자가 input 태그 안에 입력한 값을 감지
document.getElementById("btn").addEventListener("click", () => {
// 1 - 1) 변경이라는 버튼을 눌렀을 때
let inputTag = document.getElementById("name")
// 1 - 2) 입력값을 변수에 저장
let inputText = inputTag.value
console.log("입력", inputText)
// 1 - 3 조건문 작성
let pic1 = document.querySelectorAll("img")[0] // 유사배열
if (inputText == "아이유") {
pic1.src = url2
inputTag.value = "";
}
else if (inputText == "수지") {
pic1.src = url1
inputTag.value = "";
}
// 1 - 4) 조건문 이외의 입력값 처리
else {
alert("잘못입력하셨습니다.")
inputTag.value = "";
}
})
</script>
</body>
</html>
1. 변경버튼의 기능 만들기
document.getElementById("btn").addEventListener("click", () => {
// 1 - 1) 변경이라는 버튼을 눌렀을 때
let inputTag = document.getElementById("name")
// 1 - 2) 입력값을 변수에 저장
let inputText = inputTag.value
console.log("입력", inputText)변경 버튼을 눌렀을 때 우리는 사용자의 입력값을 받아내야 한다. HTML문서의 btn아이디를 가진 button태그에 이벤트리스너를 걸어서 변경버튼을 클릭했을 때의 기능을 만들려고 한다. 익명 함수에 name아이디를 가진 input태그의 입력값을 가져와야 하니까. value를 해준다. 입력값을 따로 변수에 보관해 준다.
2. 입력값에 따라 이미지 변경하기
// 1 - 3 조건문 작성
let pic1 = document.querySelectorAll("img")[0] // 유사배열
if (inputText == "아이유") {
pic1.src = url2
inputTag.value = "";
}
else if (inputText == "수지") {
pic1.src = url1
inputTag.value = "";
}
// 1 - 4) 조건문 이외의 입력값 처리
else {
alert("잘못입력하셨습니다.")
inputTag.value = "";
}img태그이름 가진 태그를 querySelectorAll로 유사배열 형태로 가져와서 인덱스로 접근해 준다.
아이유를 입력하면 아이유 사진, 수지를 입력하면 수지 사진이 나와야 한다.
∵ 입력값을 조건식으로 사용한다.
이미지 태그를 pic1 변수에 넣었으니까 pic1.src = 이미지 주소를 넣으면 주소에 맞는 사진이 출력될 것이다.
inputTag.value는 입력창을 초기화시켜주는 코드이다. 입력하고 나면 입력창의 텍스트가 스스로 지워지도록.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex14_숫자맞추기 실습.html (실패한 코드.ver) (0) | 2023.06.20 |
|---|---|
| [JS] Ex13_DOM스타일.html (0) | 2023.06.20 |
| [JS] Ex11_DOM속성.html (0) | 2023.06.20 |
| [JS] Ex10_이벤트 실습.html (0) | 2023.06.19 |
| [JS] Ex09_이벤트.html (0) | 2023.06.19 |
