코딩 스터디(모각코) 3일차 - 한 입 웹개발(JS)

웹 공부/javascript

코딩 스터디(모각코) 3일차 - 한 입 웹개발(JS)

윈터가든 2021. 7. 7. 21:22

✅ 오늘의 문제 : 모각코 삼행시 버튼 만들기

❗'모' 버튼, '각' 버튼, '코' 버튼을 누르면 각 운에 맞는 텍스트로 변경되도록!

👉 예시

[클릭 전]

[클릭 후]

✅ 오늘의 문제 풀이 인증

<Html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript3</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="2.css">
    <script src="./2.js"></script>
   
</head>
<body>
<div class="wrap">
<div class="text">
<div id="mo"> 모</div>
<div id="gak"> 각</div>
<div id="ko" >코</div>
</div>

   <button onclick="click_but1()">모</button>
   <button onclick="click_but2()">각</button>
   <button onclick="click_but3()">코</button>
    
</div>

</body>
</html>

<css>

*{  
    font-family: 'Gamja Flower', cursive;
    
    
}
.wrap{
   
    width: 450px;
    margin: auto;
}

.text{
    
   
    color: black;
    font-size: 50px;
   
    
}
button{
    width: 140px;
    height: 70px;
    font-size: 30px;
    border:none;
    background-color: lightgray;
    color: black;
    text-decoration: none;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 45px;
   
}

function click_but1(){
   var mo=document.getElementById('mo');
   mo.innerText="모두 모두"

}

function click_but2(){
    var gak=document.getElementById('gak');
    gak.innerText="각잡고 열심히 하면"
 
 }

 function click_but3(){
    var ko=document.getElementById('ko');
    ko.innerText="코린이 탈출이다"
 
 }

<결과화면>

✅ 오늘의 한마디

<innerText와 innerHTML의 차이>

innerText --> element안의 텍스트 값만 가져옵니다.

innerHTML --> element안의 HTML 전체내용을 가져옵니다.

저작자표시