文字数カウント作成のメモ

——————————————————————

// 1.テキストエリア入力があった場合
// 2.テキストエリアの文字数を取得します
// 3.文字数をカウンターに表示させる

window.addEventListener('DOMContentLoaded',
function () {

// テキストエリアのDOMを取得
var node = document.getElementById('count-text');

node.addEventListener('keyup', function () {

// テキストの中身を取得し、その文字数（length）を数える
var count = this.value.length;

// HTML 5から使えるquenrySelectorを使ったDOMの取得パターン

// カウンターを表示する箇所のDOM（HTML）を取得する
var counterNode = document.querySelector('.show-count-text');

// innerTextを使うと取得したDOMの中身のテキストを書き換えられる
counterNode.innerText = count;

}, false);

}, false
);

——————————————————————

補足

——————————————————————

var node = document.getElementById('count-text');

node.addEventListener('keyup', function () {

——————————————————————

・テキストエリアでキーを入力して、キーを離した時、イベント発火

・Listener＝自身で