JavaScriptでaddEventListener()を使う

はじめに

JavaScriptでaddEventListener()を使った処理に詰まった。そこで、使い方のメモを自分用に残そうと思う。同じようなことに詰まった方の参考になれば嬉しい。

やりたいこと

JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。

実現方法

addEventListenerとsetIntervalを用いた。apiで動画の状態を取得し、setIntervalを始め、計算した割合を出力する。動画の再生が完了したら処理を停止する。

詰まったこと

addEventListner is not function エラーが出てしまっていた。下記の2つに書いた初歩的なミスが原因であった。jsに慣れていない人は同じように詰まる人がいるかも？

①変数のスコープ

対象要素.addEventListener(イベントの種類, 関数)と書くのだが、対象要素がスコープ外にあってエラーが出ていた。

②文法がミスっていた。

関数の書き方や閉じかっこが足りないなどしょうもないミスがちらほらありました。先ずは初歩的なミスをしていないかを確認、エディタの機能でくだらない文法エラーはしないようにしたい・・・
今後使うときにコピペで使うようにサンプルを貼っておく。

document.addEventListener('DOMContentLoaded', function() {
    //var title = document.getElementById("title"); ← varは古いし、letのほうがよさそう
    let title = document.getElementById("title");
    title.textContent = "はじめまして";
});

ひとこと

慣れていないapiを使っている時はそちらに気が向いており、初歩的なミスに気が付かないことがあった。自分がよくやるミスを覚えておくと気が付きやすいかもと思った。

参考文献

田中 賢一郎. ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！. 株式会社インプレス. Kindle 版.