JavaScript #19

13267 ワード
JavaScript テキストリンク
210804
JavaScript #19
名言、背景をランダムに追加しました.
to doリストの追加
まずhtml形式で入力ウィンドウを作成します.
-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="css/style.css">
        <title>MOO App</title>
    </head>
    <body>
        <form class="hidden" id="login-form"> 
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button>
        </form>
        <h2 id="clock">00:00:00</h2>
        <h1 id="greeting" class="hidden"></h1>
        <form id="todo-form">
            <input type="text" placeholder="Write a To Do and Press Enter" />
        </form>
        <ul id="todo-list"></ul>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
        <script src="js/quotes.js"></script>
        <script src="js/background.js"></script>
    </body>
</html>
-todo.js
作成
const toDoForm = document.getElementById("todo-form")
const toDoList = document.getElementById("todo-list")
Idで要素をインポートする
以前formの基本動作はsubmit eventでした.
基本的な動きを止めましょう
const toDoForm = document.getElementById("todo-form")
const toDoInput = toDoForm.querySelector("input")
const toDoList = document.getElementById("todo-list")


function handleToDoSubmit(event){
  event.preventDefault()
  console.log(toDoInput.value)
}

toDoForm.addEventListener("submit", handleToDoSubmit)
toDoFormはdodoFormというIDの要素をインポートします.そして,ユーザが入力した値を得るためにtoDoForm内のinputを入力して出力するテストを行った.

リファレンス
https://nomadcoders.co/javascript-for-beginners/lobby
21.7.20 TIL(オブジェクト、プロトタイプ向け)
sequelizeの使い方