alert박스와 function()함수 콜라보

목표

-버튼1 / 버튼2 를 누르면 각 '아이디입력해라' / '비번입력해라' 가 적힌 alert 박스가 나오게 하기

 

코드

  <div class="alert-box" id="alert">

  <p id="title">Alert 박스</p>

  </div>

  <button onClick="알림창1열기('아이디입력해라')">버튼1</button>

  <button onClick="알림창1열기('비번입력해라')">버튼2</button>

    <script>

      function 알림창1열기(구멍) {

        document.getElementById('title').innerHTML= 구멍;

        document.getElementById('alert').style.display = 'block';

      }

=> button onClick="" 안에 function함수를 넣는다.

     function() 의 () 안의 파라미터를 입력하여 편리하게 코드를 작성한다.  

     

    1. '알림창1열기'라는 function함수를 만들어서 식을 넣는다.

          document.getElementById('id명').innerHTML       => 요소에 포함된 HTML을 불러온다

               =>  밑에 style.display를 적용할 id를 HTML내에서 불러옴

          document.getElementById('id명').style.display = 'block'; =>  id가 alert인 요소의 display = block으로 바꿔서 기존에    display: none으로 가려져있던 alert박스를 보이게한다

    2. function()함수의 ()에 편의상 '구멍'을 적고 만들어진 함수를 재활용한다.

         =>알림창1열기(구멍)라고 만들어둔 함수를 button onClick=알림창1열기(구멍)의 '구멍' 대신에 들어가길 원하는 문구를 적어서 버튼을 누르면 그 문구가 뜨게 한다.

 

결과물

 

요로코롬 버튼1과 2를 각각 누르면 구멍에 써둔 것들이 들어가게 된다.

 

function()함수 잘 써먹으면 코드가 아주 간결해질 것 같아서 잘 응용해보도록 해야겠다 !!

 

 

 

<코딩애플님의 유튜브 무료강의를 참고하여 작성했습니다: 아래 링크 첨부>

실용 자바스크립트 5강 : 이벤트리스너쓰면 드러웠던 HTML이 말끔 - YouTube