JavaScriptのgetElementsByClassNameでテキストボックスに入力できない？

2021/5/26 JavaScript, プログラミング

とりあえず、JavaScriptでテキストボックスに入力することから始めてみた。

documentを使えるので、VBAとあまり変わらない感じだ。documentじたいが何なのかはあまり良く知らないが。。「JavaScript　テキスト入力」とかでググったところ、idやnameを指定した入力方法はすぐ見つかって、試したらすぐできたのだか、ClassName指定したテキストに入力する記事がなかなか見当たらなかった。

VBAでは「obie.document.getElementsByClassName(“クラス名”)(1).Value =”100″」とすると、該当のテキストボックスに入力できるのに、安直にJavaScriptで

「document.getElementsByClassName(“クラス名”)(1).value=”100″;」と書いたら、テキストボックスに入力できなかった。ちょっと調べて、配列のカッコがちがそうな気がしてきたので、

「document.getElementsByClassName(“クラス名”)[1].value=”100″;」としてもできなかった。。。もうちょっと調べて

var elems = document.getElementsByClassName("クラス名");
elems[1].value="100";

としがだめ。。。だがしかし、elems.lengthやelems[1].valueで　elemsの件数とかテキストの値は取得できてるみたい。

多分、getElementsByClassNameでは　入力できないのだろうと諦めて、elems[1].idでIDを取得し、getElementByIdで入力するように

var elems = document.getElementsByClassName("クラス名");
document.getElementById(elems[1].id).focus();
document.getElementById(elems[1].id).value="100";
document.getElementById(elems[2].id).focus();
document.getElementById(elems[2].id).value="200";

としたら、一応OK。なぜ、getElementByIdでIDを直接指定しないかというと、画面開くたびにIDが変わるので、こういうことをする必要があるから。focus()は、対象の画面のテキスト入力欄はフォーカス当てないと入力が反映されないような制御をしているので入れてある。参考にしたコードが、いったんelemsに入れてから処理しているが、document.getElementsByClassName(“クラス名”)[1].id　としても　elems[1].id　と同じidが取得できるみたいだ。

とりあえず、ブックマークレットで、上記を試している。この調子だとなんとかなりそうな気がしてきた。