基礎学習 JavaScript編実践 TodoApp #JavaScript

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <title>JS App</title>
</head>

<body>
<input type="text" id="todo-title" placeholder="Todoを入力して下さい">
<button id="btn-todo">
    追加
</button>

<p id="todo-container"></p>

<script>
    const inputTodoTitle = document.getElementById("todo-title");
    const buttonTodo = document.getElementById("btn-todo");
    const containerTodo = document.getElementById("todo-container");

    // 追加ボタンをクリックしたら実行されるイベントリスナーを設定
    buttonTodo.addEventListener('click', e = > {

    console.log("btnTodo.addEventListenerが起動しました");

    // submitイベントのデフォルト動作（ページリロードなど）を実行しないよう設定
    e.preventDefault();

    // inputタグのオブジェクトが取得されているかを確認
    console.log("inputTodoTitle : " + inputTodoTitle);

    // inputタグに入力された値を取得
    const addeTodo = inputTodoTitle.value;
    console.log("入力されたのは : " + addeTodo);

    // 入力された値をcontainerTodoのinnerTextプロパティに代入しなさい。
    containerTodo.insertAdjacentHTML('beforeend', addeTodo);
    })
</script>
</body>
</html>
基礎学習 JavaScript編 実践 TodoApp

基礎学習 JavaScript編実践 TodoApp
