フォームに入力する文字色を変えたい

移動中に電車などで本を読むことが多いので
読んですぐ感想を投稿したいのだが...

正直、赤裸々に感想書いてると、覗き見された時にちょっと恥ずかしい。
なので、フォームに入力する文字を薄い灰色とかにしたい。

可能なのか？

フォームの部分のコードはこれ。form_with使ってる。

<div class="field color-gray">
    <%= f.text_area :content, placeholder: "New output..." %>
</div>

CSSでcolorを指定したらどうなる？

.color-gray {
  color: gray;
}

結果↓

ありゃ、拍子抜け。簡単にできるじゃん。

フォームなどに入力する文字に関しては色付けできないものかと思ってた。
（あんま見たことないし）

ボタンで、フォームの文字色を変更できるようにしたい

JavaScript使わないとできないな。
divタグに付くクラスをボタンで書き換えるって感じかな。（初心者）

☆getElementByIdでinput要素を取得後に、classNameでclass属性値を変更できる

let element = document.getElementById('summary-form');
element.classList.toggle('color-gray');

toggleでOn/Offを切り替えられる。

でも、「ボタンを押したら」の条件はどうやって追加すればいいの。

<input type="button" onclick="sample()">

こんな感じでJavaScriptの関数を呼び出せばいいらしい。onclickイベント。

<input type="button" onclick="grayColorChange()">

JavaScriptでgrayColorChange() 関数を用意した。

呼び出しエラー

grayColorChange is not defined at HTMLInputElement.onclick

なんでだ？
→scriptタグでJavascriptのファイル読み込んでもダメだな。意味が不明。

ERBの中にscriptタグでJavaScript埋め込んで解決した

<script>
    function grayColorChange() {
        let element = document.getElementById('summary-form');
        element.classList.toggle('color-gray');
    }
</script>
.
.
.
<input type="button" onclick="grayColorChange()">

パスが間違ってたのかな？何はともあれ、解決だー。
ボタンでちゃんと、フォームの文字色が変わることを確認。