JavaScript 익히기 #6 getElementby

Sunki-Kim·2022년 8월 7일

JavaScript 익히기

목록 보기

7/23

이번에는 현업에서 실무적으로 많이 쓰이는 문법을 데려와봤다. 퍼블리셔가 가져온 디자인 파일들을 프론트 개발할때 불러오는 과정중 기본적인 것들을 작성해보려한다. 우선 가장 많이 쓰는 일반적인 getElementby 이다.

getElementby.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>Document</title>
  </head>
  <body>
    <!-- 불러오기 위해서 id를 따로 정해준다. -->
    <button id="btn-prac">적용 전 버튼</button>
    <!-- 적용할 js를 불러와준다 -->
    <script src="/getElementby.js"></script>
  </body>
</html>

getElementby.js

// #6 getElementby

const $btn = document.getElementById("btn-prac");
$btn.addEventListener("click", function () {
  if ($btn.innerText === "적용 전 버튼") {
    $btn.innerText = "적용 후 버튼";
  } else {
    $btn.innerText = "적용 전 버튼";
  }
});