開発日誌：入力フォームの値を処理で使えるようにする

クラウドファンディングに成功したYouTubeの検索をエンハンスするツール開発の試行錯誤ログです。
（「ソムリエ」より「エンハンス」のほうがよかったかな、と今ちょっと思ってる。でもそれはそれで一般人に単語わからないとかなりそうな気もする。）

モックとして作ったサイトの入力フォームの値を使えるようにしていきます。
こう、例えるならば他の家を見てああいう家があるなら自分の家はこういう家にできるやろ、と脳内青地図でクラウドファンディング成功したはいいけど「あ、俺、木をのこぎりで切ったことすらなかったわ」と冷静になった頃に軽く絶望しているスタート。

入力フォームの値を使えるように取得するにはidを指定してやるらしい。

let element = document.getElementById('mytext');
console.log(element.value);

モックのコードを見ると現状CodePenから見つけたサイトの入力フォームをコピペ増産しているのでform id="search-video" が重複しています。

index.html

                <div class="search-bar">
                動画タイトル、動画概要欄、字幕内で「検索する」単語を入力してください。
                    <form id="search-video" class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="" value="名前のない怪物">
                        </div>
                    </form>
                    <div class="search-message"></div>
                </div>


                <div class="search-bar">
                動画タイトル、動画概要欄、字幕内で「重視する」単語を入力してください。
                    <form id="search-video" class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="" value="">
                        </div>
                    </form>
                    <div class="search-message"></div>
                </div>

これをidを一意なものにしていきましょう。
（あとserch-messageのdiv、ここにこんなにいらん気がするので削ります。）

意味	id
「検索する」単語	search-word
動画で「重視する」単語	focus-word-video
チャンネルで「重視する」単語	focus-word-channel
字幕で「重視する」単語	focus-word-subtitles
ブロックする単語	block-word
ブロックする再生数	block-views
ブロックする登録者数	block-subscribers
ブロックする再生時間	block-time

こういうときあるあるな英語ニュアンスわからない問題。
辞書的にはfocusかimportantかemphasisか。
悩む時間がもったいないので自分的わかりやすさ重視でfocusでいってみよう。

前述のサイトを参考にテストコードでフォームの値が取れるかやってみる。

index.html

                <p>動作検証用コード</p>

                <p>
                <input type="button" value="Check" id="checkButton">
                </p>

                <p id="msg"></p>

                <script>

                
                let testText = document.getElementById('focus-word-video');
                let msg = document.getElementById('msg');
                
                let checkButton = document.getElementById('checkButton');
                checkButton.addEventListener('click', butotnClick);

                function butotnClick(){
                    msg.innerText = 'focus-word-videoは' + testText.value + 'ですね';
                  }

                </script>

あれ、undefinedになっちゃうな。

ん－。あ、idの設定場所か！

誤

index.html

                <div class="search-bar">
                動画タイトル、動画概要欄、字幕内で「重視する」単語を入力してください。
                    <form id="focus-word-video" class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="例：製品型番" value="解説,比較,検証,レビュー">
                        </div>
                    </form>
                </div>

正

index.html

                <div class="search-bar">
                動画タイトル、動画概要欄、字幕内で「重視する」単語を入力してください。
                    <form class="form-group">
                        <div class="input-group">
                            <input type="text" id="focus-word-video" class="form-control" placeholder="例：製品型番" value="解説,比較,検証,レビュー">
                        </div>
                    </form>
                </div>

おーけー。正解。

フォームの値を変えればちゃんと変わることも確認できた。

体系的な技術積み上げしてないので一歩一歩にかかる時間がパナイ。
でも必要性のわからないオベンキョウからやっても飽きるやろ、という意見もあるのでこの方針でまた明日。