こんにちは、ススムです。
JavaScriptのgetElementById・addEventListenerとは何なのか？
そんな方向けの記事内容となります。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
本記事の内容
・JavaScriptのgetElementByIdとは
・JavaScriptのaddEventListenerとは
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
JavaScriptのgetElementByIdについて
getElementByIdとは、指定したid値を持つ要素をElementオブジェクトとして返すメソッドです。 getElementByIdは、以下のように書きます。
document.getElementById(id)
このidの部分には、htmlで記述した取得したいidを書きます。
では実際にコードを書いてみます。
続いては文字を連結して書いてみます。
次は計算結果を書いてみます。
innerHTMLとは
上記でも記述したinnerHTMLとは何か?
innerHTMLとは、html要素の中身を変更することのできる関数です。 innerHTMLは以下のように書きます。
element.innerHTML;
変数に代入することもできます。
var test=element.innerHTML;
以下のように記述すると要素内を空にします。
element.innerHTML=””;
JavaScriptのaddEventListenerについて
addEventListenerはイベントリスナー(イベントに合わせて実行させる関数)を登録するためのメソッドです。
イベントリスナーを追加することで発生したイベントに応じて指定した関数を実行させます。
addEventListenerは以下のように記述します。
要素.addEventListener(イベント、関数、オプション);
では実際にコードを書いてみます。
初期値は0に設定します。
クリックされたときに+1をします。
マウスオーバー
マウスオーバーとは、ある要素の上をマウスカーソルが通ったときに発生するイベントで す。
マウスオーバーは以下のように書きます。
elem.addEventListener(“mouseover”,function(event){
マウスオーバーの処理
},false);
ではコードを書いてみます。
このようにカーソルを合わせると色が変わります。
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min
https://ping-t.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント