22.04.19 javascript study

  • getElementById : 인자에 해당하는 값을 id로 하는 요소를 하나 반환합니다.
  • getElementsByClassName : 인자에 해당하는 값을 class로 하는 요소를 여러개 반환합니다.
  • querySelector : css-selector 문법을 받아서 해당하는 요소를 하나 반환합니다.

onclick 으로 함수실행하기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="alertBox">알림창임!</div>
    <button class="show-alert" onclick="document.getElementById('alertBox').style.display = 'block'">알림창을 보여줘!</button>
</body>
</html>
<button class="show-alert" onclick="모달창열어줘()">알림창을 보여줘!</button>

<script>
    function 모달창열어줘() {
        document.getElementById('alertBox').style.display = 'block';
    }
</script>

입력한값 클릭후 화면에 나타내기

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="text" id="targetInput">
  <button id="submitBtn">제출</button>
  <div id="result"></div>
  <script>

    document.getElementById("submitBtn").addEventListener('click',function(){
      var 사용자가입력한값 = document.querySelector('#targetInput').value;
      document.querySelector("#result").innerHTML = 사용자가입력한값;
  </script>
</body>
</html>

조건문을 추가하여 값이 없으면
공백을 제거후에 알럿창 생성하기!

 if(!사용자가입력한값.trim()){
        alert("공백이있습니다.")
      }
    });

최종 결과

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="text" id="targetInput">
  <button id="submitBtn">제출</button>
  <div id="result"></div>
  <script>

    document.getElementById("submitBtn").addEventListener('click',function(){
      var 사용자가입력한값 = document.querySelector('#targetInput').value;
      document.querySelector("#result").innerHTML = 사용자가입력한값;
      if(!사용자가입력한값.trim()){
        alert("공백입력 ㄴㄴ")
      }
    });
   
  </script>
</body>
</html>
스프링수업 19일차
플렉스 박스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage