コース: RxJS 入門

今すぐコースを受講しましょう

今すぐ登録して、23,500件以上登録されている、業界エキスパート指導のコースを受講しましょう。

標準JavaScriptでボタンのクリック回数を数える

標準JavaScriptでボタンのクリック回数を数える

コース: RxJS 入門

標準JavaScriptでボタンのクリック回数を数える

このレッスンでは標準の JavaScript コードで button が click された回数を 数えてみます。 今開いてるドキュメントには button 要素があります。 こちらですね。 type、button となっていますが この button 要素を querySelector で 参照、button の参照を取ってきて 変数に入れたら それに対して addEventListener で click したらこれをやれ、という事で console に event.type ですから click という文字が出てくるように なっています。 では今の動きを確かめましょう。 ブラウザウィンドウをリロードして console が出てますね。 button を click する度に click と どんどん カウントアップされていきますね。 これは console の方で カウントアップしているんですが 実際に JavaScript のコードで カウントアップをしてみたいと思います。 ではこのウィンドウの表示モードは [分割]から [コード]、全体に表示するように 切り替えます。 そしてカウントアップした数を 覚えておかないといけませんね。 ということで、標準的にはそのカウント アップを入れるための変数を 宣言するんでしょう。 var ではなくて ECMAScript 6 の 構文を使いたいと思いますけれども const は一度入れた値を別の値で 上書きすることができません。 上書きしたい場合には const ではなくて let という宣言を使います。 そして count にしましょう。 初期値は0ということで ここをちょっと書き換えまして 文字とカウントアップしたもの 数字ですね、それを 書きたいと思いますが、これまでの JavaScript の構図ですと シングルクオテーション、もしくは ダブルクオテーションを使うんでしょうが ECMAScript 6 ではバックティック と言いますけれども このクオテーションですね 左上から右下に このクオテーションを使うと ちょっと便利なことがあります。 まず count という文字を 表示して コロンで、そしてここに 数字を入れたいと。 これまでの構文ですと このクオテーションの外に出て プラスのこの count…

目次