JavaScript #8

9312 ワード
テキストリンク
210803
JavaScript #8
  • 新規作成
    • Login機能の追加
    -index.html
    <!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">
  <link rel="stylesheet" href="style.css">
  <title>MOO App</title>
</head>
<body>
  <input type="text" placeholder="What is your name?" /> 
  <button>Log In</button>
  <script srt="app.js"></script>
</body>
</html>

    inputとbuttonタグをdivにパッケージ化し、Idを追加
        <body>
        <div id="login-form">
            <input type="text" placeholder="What is your name?"/>
            <button>Log In</button>
        </div>
        <script srt="app.js"></script>
    </body>
    これによりid login-formでinputとbuttonを見つけることができます.
    -app.js
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const loginButton = loginForm.querySelector("button")
    同一
    const loginInput = document.querySelector("#login-form input")
const loginButton = document.querySelector("#login-form button")
    次に、入力ウィンドウとボタンに機能を挿入します.
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const loginButton = loginForm.querySelector("button")

function btnClick(){
  console.dir(loginInput)
  console.log("click")
}

loginButton.addEventListener("click", btnClick)
    入力ウィンドウの内容を見てみましょう
    loginInputに入力した内容はvalueです.

    jsのコードの内容を変更する
    function btnClick(){
  console.log(loginInput.value)
  console.log("click")
}

    何の内容もありません.

    内容入力時
    これで入力した値が得られます.
    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    MINA転送ファイル名
    符号化復号UTF-8、gb 2312等のパーセンテージ符号化による復号例