01 / 03
「押されたら」を書く
ボタンが押されたときに何かをするには、押されたら呼ばれる関数を登録するよ。それが addEventListener だ。
第1引数の "click" が「押されたら」の部分。第2引数が「そのとき何をするか」だよ。
const button = document.getElementById("add")button.addEventListener("click", () => { console.log("押された")})やることリストを作る
INPUT · スライド
01 / 03
ボタンが押されたときに何かをするには、押されたら呼ばれる関数を登録するよ。それが addEventListener だ。
第1引数の "click" が「押されたら」の部分。第2引数が「そのとき何をするか」だよ。
const button = document.getElementById("add")button.addEventListener("click", () => { console.log("押された")})02 / 03
打ちこんだ文字は input.value で取り出せる。画面に見えている文字がそのまま入っているよ。
注意したいのは、これが textContent ではないこと。input は「中身を持つ箱」ではなく「値を持つ部品」なんだ。
const input = document.getElementById("task")console.log(input.value)03 / 03
リストに1行ふやすのは3手だよ。
document.createElement("li") … li を作る(まだどこにも無い)item.textContent = ... … 文字を入れるlist.appendChild(item) … ul の中にくっつける作っただけでは画面に出ない、というのがつまずきやすいところ。くっつけて初めて見えるんだ。
const item = document.createElement("li")item.textContent = "ぎゅうにゅうを買う"list.appendChild(item)