22.04.19 javascript study

20967 ワード
テキストリンク
  • 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日目
    コルク箱