【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" onclick="ChangeTitle()">

</body>
</html>