簡単な地名作成ツールを作る JavaScript修正編

由来指定地名ジェネレーター(β)Ver.2.1に更新しました

簡単な地名作成ツールを作る 検討編

簡単な地名作成ツールを作る HTMLとCSSを書く編

HTMLとCSSで側を作ったので、その値を取得して結果を反映できるようにJavaScriptを修正します。

ボタンクリック時に実行

実行ボタンをクリックしたときにJavaScriptが実行されるようにonClickを使います。

生成由来取得

ラジオボタンの値を取得するために良い感じにやります。

私はid指定をしていないのでdocument.getElementById(“hoge”)で取得しました。

また、ラジオボタンを利用した場合はどれにチェック入っているか確認するようなコードを書く必要があります。若干面倒。

外部ファイル取得

ファイルを取得するためにinput type = “file”を使っています。

document.getElementById(“hoge”)でファイルのリスト、.files[0]でリストの最初のファイル名を取得できます。
私は一つしか読み込めないかつファイル名のみ必要なのでdocument.getElementById(“hoge”).files[0]で直接ファイル名を取得しちゃいます。

あとはFileReader()なりを使ってファイルの内容を取得します。
このときにコールバック関数なるものを利用することになりますが、コールバック関数内から外部の変数に代入することができないという謎仕様なので、コールバック関数内から続きの処理をする関数を呼び出し、そこに引数として読み込んだ文字列を良い感じに引き渡すことによって良い感じに実行させます。ここのせいで何時間か無駄にしました。

内部ファイル取得

内部に保存してあるプリセットのファイルを読み込みます。

基本的には以前書いたコードと同じですが、上の外部ファイル取得処理のために後半の出力処理を別関数にしてしまったのでここでも文字列を引き渡して良い感じに実行できるようにしました。最初から細かく分ければ良いのかもしれませんがそこまで行数があるわけでも・・・

文字数、生成数取得

セレクトボックスを使って取得します。

例に漏れずdocument.getElementsByName(“hoge”)で読み込むわけですが、ここでも配列として読み込まれるようです。

また、取得される値は数値ではなく文字列です。HTML側で数値で出来ないかなと試しましたがおそらく無理なので、HTML側では文字列として数値を入れておき、JavaScript 側でNumber()なりを使って数値に変換しましょう。

hoge = document.getElementsByName(“hoge”);
hogehoge = Number(hoge[0].value);
のようにすれば求めている数値が得られるような気がします。

テキストエリアへの出力

テキストエリアに結果を出力します。

例に漏れず（ry上と同じような処理が必要になります。

hoge = document.getElementsByName(“hoge”);
hoge[0].value = hogehoge;
でhogehogeの中身がテキストエリアに表示されるはずです。

ちょこっとの修正で使えるようになるだろうと考えていましたが、想像以上に広く修正することになりました。
場所によってはほぼ新規です。Web系大変だ・・・

とはいえ、なんとか一応使えるようにはなったので調整して公開したいと思います。まぁほぼ自分用なのですがね！