WEB/JS

[JS] 3-2. 과제 - HTML + Javascript(2)

개발자 만두 2021. 9. 19. 06:16
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
반응형