itsme

모각코 3일차 - 한 입 웹개발 (JS) 8월과정 본문

대외활동/모각코 - 온라인 대외활동

모각코 3일차 - 한 입 웹개발 (JS) 8월과정

itssmeee 2021. 8. 12. 17:28
반응형

이번에는 '모' 버튼, '각' 버튼, '코' 버튼을 누르면 각 운에 맞는 텍스트로 변경되도록 만들어 주었다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>

<body>
  <span>모</span><br>
  <span>각</span><br>
  <span>코</span><br>

  <button onclick="changeText1()">모</button>
  <button onclick="changeText2()">각</button>
  <button onclick="changeText3()">코</button>

  <script src="./index.js"></script>
</body>
</html>
function changeText1() {
  var h1 = document.getElementsByTagName('span')
  h1[0].innerHTML = "모처럼이니"
}
function changeText2() {
  var h1 = document.getElementsByTagName('span')
  h1[1].innerHTML = "각잡고 열심히 하면"
}
function changeText3() {
  var h1 = document.getElementsByTagName('span')
  h1[2].innerHTML = "코린이 탈출이다"
}