【javascript】セレクトボックスでonChangeを使ったら[object HTMLSelectElement]というエラーが出る。 | 在宅ネットでコツコツお金を稼ぐ

管理人は普段あまりjavascriptを使う機会はないのですが、 時々、使うことがあります。javascriptも極めるといろいろなことに使えるので、 勉強していきたいところです。 今回は、そんなjavascriptを使っていて、 エラーが出てしまったので、その対処法をメモしておきたいと思います。

javascriptでやりたいこと

今回やりたいことは、htmlのセレクトボックスの値を選択したら、 選択された値を取得する、というものです。onChangeイベントを使って、 javascriptで処理しようと思いました。

最初のソースコードは以下のようなものです。 htmlファイルに記述します。

エラーが出たソースコード


<form>

<select id="selectBox" onChange="Change()">

<option value="0">選択して下さい</option>

<option value="1">値1</option>

<option value="2">値2</option>

<option value="3">値3</option>


</select>

<input type="text" id="tag">

</form>

<script language="javascript" type="text/javascript">
function Change() {
var str =document.getElementById("selectBox");
document.getElementById("tag").value = str;
}
</script>


これでうまくいくと思いましたが、 取得できた値が

[object HTMLSelectElement]

となってしまいました。 しばらくハマってしまいましたが、 やっと解決できました。 修正した箇所は以下の通りです。


var str =document.getElementById("selectBox").value;

右辺に「.value」としたところ、 うまく値を取得することができました。 こういうちょっとしたところが慣れないので難しいなと思います。

正しいソースコード

正しいソースコードは以下のとおりです。これで、目的の処理ができました。


<form>


<select id="selectBox" onChange="Change()">

<option value="0">選択して下さい</option>

<option value="1">値1</option>

<option value="2">値2</option>

<option value="3">値3</option>


</select>

<input type="text" id="tag">

</form>

<script language="javascript" type="text/javascript">
function Change() {
var str =document.getElementById("selectBox").value;
document.getElementById("tag").value = str;
}
</script>

上のところは、


var str =document.getElementById("selectBox"); document.getElementById("tag").value = str.value;

という書き方でも、できました。 今回作成したサンプルページは以下です。

JavaScriptでセレクトボックスの値を取得するサンプル

今回のまとめ

今回は、javascriptでセレクトボックスの値をonChangeで取得してみました。 なんとかうまくできました。 javascriptは以前、ajaxが以前話題になったり、javascriptそのままや、 html5でゲームを作ったりと、いろいろと活躍しそうですよね。 管理人ももっと勉強したいところです。

(2020/08/16)

トップページ

その他のコラム

コンテンツ

トップページ