[코딩애플 JS 기초] function, onClick활용

Jessie H·2022년 4월 13일

코딩애플 JS 기초

목록 보기

1/19

onClick 사용해서 버튼 클릭하면 내용 보이게 만들기

이런 화면에서 열기 버튼을 누르면

이렇게 창이 나타나고

닫기 버튼을 누르면

다시 원래대로 돌아오는 것을 onClick을 사용해 만들기

html, JS

<body>
    <div class="alert-box" id="alert">알림창임</div>
    <button
      id="open"
      onClick="document.getElementById('alert').style.display
      ='block';"
    >
      열기
    </button>
    <button
      id="close"
      onClick="document.getElementById('alert').style.display
    ='none';"
    >
      닫기
    </button>
  </body>
</html>

CSS

.alert-box {
  background-color: aqua;
  color: white;
  padding: 20px;
  border-radius: 20px;
  display: none;
}

#open {
  margin: 10px;
}

Script 안에 JS 입력하기

    <div class="alert-box" id="alert">알림창임</div>
    <button id="open" onClick="알림창열기()">열기</button>
    <button id="close" onClick="알림창닫기()">닫기</button>

    <script>
      function 알림창열기() {
        document.getElementById("alert").style.display = "block";
      }

      function 알림창닫기() {
        document.getElementById("alert").style.display = "none";
      }
    </script>
  </body>
</html>

위와 동일하게 화면이 잘 나타난다

강의를 듣다가 문득 뭔가 이상함이 느껴져서 보니...닫기 버튼을 div 안에 만들었어야 하는 것을 깨달았다!!

그래서 함수 하나로 열고 닫는 코드를 만들면서 수정했다.

 <body>
    <div class="alert-box" id="alert">
      알림창임
      <button onClick="열고닫고('none')">닫기</button>
    </div>
    <button onClick="열고닫고('block')">열기</button>

    <script>
      function 열고닫고(display) {
        document.getElementById("alert").style.display = display;
      }
    </script>
  </body>

파라미터

function 열고닫고(display) {
        document.getElementById("alert").style.display = display;
      }

display = 파라미터

아이디, 비밀번호 입력 안내 창

<body>
    <div class="alert-box" id="alert">
      <p id="title">알림창임</p>
      <button onClick="열고닫고('none')">닫기</button>
    </div>
    <button onClick="아이디알림창()">버튼1</button>
    <button onClick="비번알림창()">버튼2</button>

    <script>
      function 열고닫고(display) {
        document.getElementById("alert").style.display = display;
      }

      function 아이디알림창() {
        document.getElementById("title").innerHTML = "아이디를 입력하세요";
        document.getElementById("alert").style.display = "block";
      }

      function 비번알림창() {
        document.getElementById("title").innerHTML = "비번을 입력하세요";
        document.getElementById("alert").style.display = "block";
      }
    </script>
  </body>
</html>

Jessie H

코딩 공부 기록장

다음 포스트