Javascript 기초 1

문제

      <div class="alert-box" id="alert">
        <p class="alert-text">알림창임</p>
        <button onclick="openAlert('none');">닫기</button>
      </div>

      <button onclick="openAlert('block');">버튼1</button>
      <button onclick="openAlert('block');">버튼2</button>

[버튼1] 클릭시 '아이디 입력하세요' 알림창 오픈
[버튼2] 클릭시 '비밀번호 입력하세요' 알림창 오픈

문제풀이

	  <div class="alert-box" id="alert">
        <p class="alert-text">알림창임</p>
        <button onclick="openAlert('none');">닫기</button>
      </div>

      <button onclick="openAlert('block','아이디입력하세요');">버튼1</button>
      <button onclick="openAlert('block','비밀번호입력하세요');">버튼2</button>

      <script>
        function openAlert(e, t) {
          document.getElementById("alert").style.display = e;
          document.querySelector(".alert-text").innerText = t;
        }
      </script>

openAlert 함수에 파라미터 값을 각각 주어 클릭 시
.alert-text 안의 텍스트 값을 변경하도록 함