BLOG

jsメモφ(..)

おはようございます。

冬眠の季節でございます。寒さでなかなか起きれなくなってきました。どうもハヤトワンです。

もっと厚着して寝ようと思います。

今日は昨日勉強した内容の復習です。

vanilla.jsでtodoリスト作る場合どうするか。

仕様は入力した内容が未完了ゾーンに入っていく

これをvanilla.jsで実装

▼idをふったテキストの中身を取得して変数に代入

const inputText = document.getElementById("text").value;

▼入力した内容がそのまま残るのを防ぐ為、初期化

document.getElementById("text").value = "";

▼div生成

const div = document.createElement("div");

▼生成したdivにクラス名をつける

div.className = "list-row";

▼liタグ生成

const li = document.createElement("li");

▼生成したliタグのinnerTextに取得したinputTextを代入する

li.innerText = inputText;

▼divタグの子要素に入れる

div.appendChild(li);

▼未完了ゾーンに追加する

document.getElementById("incomplete-area").appendChild(div);

▼これらの流れは一つの関数にまとめる

const onClickAdd = () => {
//ここに
}

▼ボタンを押したらこの関数が発動するようにする。

document.getElementById("button").addEventListener("click", () => onClickAdd());

っていう流れ。

参考にさせて頂いてる教材

非常に分かりやすいですm(_ _)m

https://www.udemy.com/course/modern_javascipt_react_beginner/

それでは今日も良い1日を!