[JavaScript] テキストボックスの値の取得と設定を行う

投稿日：2016年10月8日更新日：2018年5月3日

テキストボックスの値の取得と設定を行うサンプルです。

テキストボックスの値を取得するサンプル

例）ボタンを押すとvalue値を取得して表示する

function getValue(idname){
  // value値を取得する
  var result = document.getElementById(idname).value;

  // Alertで表示する
  alert("value値は「" + result + "」です");
}

function getValue(idname){

// value値を取得する

var result = document.getElementById(idname).value;

// Alertで表示する

alert("value値は「" + result + "」です");

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" id="txt1" value="hoge">
  <input type="button" value="ボタン" onclick="getValue('txt1');">
</body>
</html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、テキストボックスの内容をalertで表示します。

テキストボックスに値を設定するサンプル

例）ボタンを押すとテキストボックスに"hogehoge"を設定する

function setValue(idname){
  //テキストボックスオブジェクトを取得する
  var obj = document.getElementById(idname);

  //valueに値をセットする
  obj.value = "hogehoge";
}

function setValue(idname){

//テキストボックスオブジェクトを取得する

var obj = document.getElementById(idname);

//valueに値をセットする

obj.value = "hogehoge";

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="text" id="txt2" value="hoge">
  <input type="button" value="ボタン" onclick="setValue('txt2');">
</body>
</html>