HTML、formに表示される値、valueをinnerHTML、document.formsで変更する

#概要

JavaScriptでHTMLとformの表示を変更するときに苦労したので、解決した方法を簡単なアプリを作ってまとめておきます。

#作成するアプリ

![8359fc3b1ac60ef15a37a436d0c52361.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555962/e57c390c-16e9-7d84-0049-c0b7cad7ad77.gif)


#実装内容
受信のボタンを押すと
・フォームの表示
・HTMLの表示
・ボタンの表示
の3つの表示が変更される。

#作成・編集するファイル
・routes.rb
・texts_controller.rb
・index.html.erb

この3つのファイルを編集します。
ルーティング、コントローラーについては特に説明しません。

#ルーティング
ルーティングは以下のように記載してください。

```ruby:routes.rb
Rails.application.routes.draw do
  root to: 'texts#index'
  resources :texts, only: [:index]
end
```

#コントローラー
コントローラーは以下のように記載してください。

```ruby:texts_controller.rb
class TextsController < ApplicationController
  def index
  end
end

```

#ビュー
ビューは以下のように記載してください。

```erb:index.html.erb
<h2>Text Change</h2>
<form id="formId" name="formName">
<input id="textId" name="textName" type="textbox" value="変更前">
<input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>
<div id="htmlId">変更前</div>

<script>

var formElements = document.forms.formId;
function textChange() {
  htmlId.innerHTML = "HTMLに表示";
  formElements.textId.value = "フォームに表示";
  formElements.btnId.value = "受信";  
}

</script>
```

では、ポイントを説明します。

```erb:

<form id="formId" name="formName">
  <input type="textbox" id="textId" name="textName" value="変更前">
  <input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>
<div id="htmlId">変更前</div>
```

`input`、`form`はそれぞれ`id`、`name`を設定しましょう。
あとでこの`id`、`name`を使用します。
`div`は`id`だけ設定します。

`type="button"`のタグの中に`onclick`を記載して、JavaScriptで発火させる関数を設定しましょう。
今回発火させる関数は`textChange()`という関数です。

```js
var formElements = document.forms.formId;
function textChange() {
  htmlId.innerHTML = "HTMLに表示";
  formElements.textId.value = "フォームに表示";
  formElements.btnId.value = "受信";
}
```

まず、HTMLの表示を変更する`innerHTML`について説明します。
HTMLの表示を変更したい場合は

```js
// (取得したid).innerHTML = (表示したい内容)
htmlId.innerHTML = "HTMLに表示";
```

という感じに設定します。
HTMLの変更で実装する内容はこれで終了です。

次に`form`の表示を変更する`document.forms`について説明します。

まず`form`の表示する内容を変更する場合`innerHTML`と違って必要になってくるのが、`document.forms`です。
使い方は`document.forms`の後に、変更を加えたい`form`の`id`、`name`を設定することで`form`以下の`input`の表示する内容を変更できるようになります。

```erb:
<%# document.forms.formId(formName)で設定 %>
<form id="formId" name="formName">
</form>

<script>
  //どちらでもOK
  var formElements = document.forms.formId;
  var formElements = document.forms.formName;
</script>
```

次は実際に表示を変更するコードです。

```erb:
<%# document.forms.formId(formName)で設定 %>
<form id="formId" name="formName">
  <input id="textId" name="textName" type="textbox" value="変更前">
  <input type="button" id="btnId" name="btnName" value="送信" onclick="textChange()">
</form>

<script>
var formElement = document.forms.formId
function textChange() {
  // textIdのvalueの表示をフォームに表示に変更
  formElement.textId.value = "フォームに表示";
  // btnIdのvalueの表示を受信に変更
  formElement.btnId.value = "受信";
}
</script>
```

`formElement`で設定した`form`以下の`input`には`textbox`と`button`があります。
これらの表示を変更するためには、表示を変更したい`input`の`id`、`name`、最後に`value`を設定することで、`=`（イコール）で設定した値に変更することができます。

```js
  // どちらでもOK
  formElement.textId.value = "フォームに表示";
  formElement.textName.value = "フォームに表示";
  // どちらでもOK
  formElement.btnId.value = "受信";
  formElement.btnName.value = "受信";
```

これで説明は終了です。

#最後に

今回は`<form>`での実装でしたが、`form_with`等に`id`、`name`を設定しても同様のことができるのでやってみてください。

#参考にした記事、サイト
http://www.shurey.com/js/form/