【JavaScript】ボタンクリック処理：入力した値を使用して、HTMLのタイトルタグの値を変更する

■作成するプログラムの概要

・HTMLの画面にてJavaScriptを実装する。

・テキストボックスに値を入力する。

・ボタンクリック時、タイトルタグの値を入力した値に変更する。
なお、入力した値が空の場合は、エラーメッセージを出力する。

■フローチャート

■プログラム仕様

入力処理内容出力
【テキストボックス】
タイトル名		テキストボックスに入力した値を取得する。–
–【条件分岐】テキストボックスの入力値
▼ありの場合
HTMLのタイトル名を変更する。
▼なしの場合
エラーメッセージを出力する。		正常系
HTMLのタイトル名

異常系
エラーメッセージ

■画面仕様

・テキストボックスに値を入力する。
・「タイトル変更」ボタンを押下する。
・HTMLのタイトルタグ「変更前タイトル」を入力した値に変更する。

■サンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>変更前タイトル</title>
</head>
<body>
    <!-- ここにjavascriptを実装する-->
    <script type="text/javascript">
        /*
        処理名
            タイトル変更処理
        処理概要
            ボタン押下時、テキストボックスの値をインプットとして、
            HTMLのタイトルタグの値を変更する。
        引数
            なし
        戻り値
            なし
        */
        function ChangeTitle() {
            // テキストの要素取得
            let txt_element = document.getElementById('new_title_name');

            // 入力値が空ならば、警告メッセージ出力
            if (txt_element.value == '') {
                alert('値を入力してください');
            } else {
                //タイトルを変更
                document.title = txt_element.value;
            }
        }

    </script>

    変更後のタイトル名：
    <input type="text" id="new_title_name">
    <input type="button" value="タイトル変更" id="btn_title">

</body>
</html>

■実行結果

▼正常系

・テキストボックスに「AAAAA」を入力し、「タイトル変更」ボタンを押下する。

・タイトルタグの名前が「AAAAA」に変わる。

▼異常系

・テキストボックスに値を入力せずに、「タイトル変更」ボタンを押下する。

・エラーメッセージを出力する。