JavaScript #12

8725 ワード
CSS JavaScript テキストリンク
210803
JavaScript #12
  • ユーザーがアカウントを入力してログインした後の行為
    cssでログインすると、このフォーム
    • を削除してみます.
    -style.css
    .hidden{
  display: none;
}
    classnameにhiddenが含まれている場合、要素は消えます.
    app.js
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")

function onLoginSubmit(event){
  event.preventDefault()
  const username = loginInput.value
  loginForm.classList.add("hidden")
  console.log(username)
}

loginForm.addEventListener("submit",onLoginSubmit)


    入力後にログインするとformが消えます.
    formの下にhidden classname付きh 1を作成します.
    -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>
        <form id="login-form"> 
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button>
        </form>
        <h1 id="greeting" class="hidden"></h1>
        <script src="app.js"></script>
    </body>
</html>
    -app.js
    const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const greeting = document.querySelector("#greeting")

const HIDDEN_CLASSNAME = "hidden"

function onLoginSubmit(event){
  event.preventDefault()  // 기본동작 막기 (submit)
  loginForm.classList.add(HIDDEN_CLASSNAME) // form이 사라지도록 classname추가
  const username = loginInput.value // 사용자 이름 저장
  console.log(username)
  greeting.innerText = "Hello " + username
  greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginForm.addEventListener("submit",onLoginSubmit)
    ユーザー名を入力してログインするとformは消え、入力したユーザー名をユーザー名に保存します.
    保存したユーザー名をh 1ラベルに表示するにはhidden classnameを削除します.

    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lobby
    [pythonベース]Code-kata週3-2
    14. 110. 1.ProgressMonitor Class進捗監視クラス