
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
JavaScript
2017.12.06
getElementById は、HTMLのタグ内で指定したid 名にマッチするドキュメント要素を取得するメソッドです。
今回は、getElementById メソッドを使用して、Webサイトの画面から入力された値を取得する方法について紹介します。
1.getElementById メソッド
2.textContent プロパティで表示テキストを取得
3.value プロパティで入力値を取得
getElementById メソッドは、HTMLタグ内で指定した id 名にマッチするドキュメント要素を取得する Elementオブジェクトのメソッドです。
次のように記述して使用します。
document .getElementById( ” id 名 ” );
引数に HTMLタグ内で指定した id 名を指定します。
<p id="dat"">Hello!</p>
上記の p タグ内で指定した id 名「 dat 」を指定して、次のように getElementById メソッドを記述します。
document.getElementById("dat");
「 document.getElementById(“dat”) 」の返り値は Element オブジェクトで、その内容を画面上に表示すると次のようになります。
Hello!
これだけでは、指定した p 要素の内容は不明です。
因みに、「 console.log(document.getElementById(“dat”)); 」として、Element オブジェクトの内容をコンソールに出力すると、次のように表示されます。
先ほどのサンプルで、p 要素「 <p id=”dat”>Hello!</p> 」内で通常必要となる値は、表示テキストの「 Hello! 」の部分だと思います。
表示テキストの内容を取得する場合は、getElementById メソッドを次のように記述して使用します。
document .getElementById( ” id 名 ” ) .textContent;
表示テキストの内容は、getElementById メソッドに textContent プロパティを付けて取得します。
「 document.getElementById(“dat”).textContent 」を出力すると、次のようになります。
Hello!
テキスト内容の「 Hello! 」が取得できました。
getElementById メソッドは、Webサイトの画面で入力された値を JavaScript 側で取得する場合に よく使用します。
画面の入力値を取得する際には、getElementById メソッドを次のように記述して使用します。
document .getElementById( ” id 名 ” ) .value;
入力値は、getElementById メソッドに value プロパティを付けて取得します。
valueプロパティの値は 文字列となるため、「 document .getElementById( ” id 名 ” ) .value 」の返り値は 全て文字列となります。
次のサンプルは、上のテキストボックスで入力された値を 下のテキストボックスに表示するプログラムです。
文字等を入力して、表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { document.getElementById("dat_out").value = document.getElementById("dat_in").value; } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="dat_in" placeholder="ここに入力して下さい"> <nobr><input type="button" value="表示" onClick="disp()"></nobr> <input type="text" id="dat_out" placeholder="入力内容をここに表示します"> </div>
「 document.getElementById(“dat_out”).value = document.getElementById(“dat_in”).value; 」で、id 名「 dat_out 」のテキストボックスの内容を、id 名「 dat_in 」のテキストボックスの内容に変更しています。
このように、入力値を取得する際にも、内容を変更する際にも「 document .getElementById( ” id 名 ” ) .value 」を使用します。
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.