728x90
반응형
✅오늘의 과제
➰버튼을 누르면 연결된 텍스트가 변경되도록 하기
➰코드
day3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day3</title>
<style>
p, button {
margin: 0;
}
</style>
</head>
<body>
<p>김</p>
<p>민</p>
<p>선</p>
<button onclick="changeText0()">❓</button>
<button onclick="changeText1()">❔</button>
<button onclick="changeText2()">❓</button>
<script src="./day3.js"></script>
</body>
</html>
day3.js
let p = document.getElementsByTagName('p');
function changeText0() {
p[0].innerHTML = "KIM";
}
function changeText1() {
p[1].innerHTML = "MAN";
}
function changeText2() {
p[2].innerHTML = "DU";
}
코드 설명
p 태그 3개에 한 글자씩 넣고, button 3개를 만들어 각각이 클릭될 때 연결된 함수가 실행되게 했다. 변수 p에 태그명이 p인 요소를 모두 배열의 원소로 넣어서 그 값의 innerHTML 내용을 바꾸는 함수를 3개 만들었다.
➰코드실행화면(https://jsday3.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day3
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
728x90
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 4-2. 과제 - 콘솔 사용법 (0) | 2021.09.19 |
|---|---|
| [JS] 4-1. 콘솔 사용법 (0) | 2021.09.19 |
| [JS] 3-1. HTML + Javascript(2) (0) | 2021.09.19 |
| [JS] 2. HTML + Javascript(1) (2) | 2021.09.14 |
| [JS] 1. JS 알아보기 (0) | 2021.09.14 |
