検索機能 - C言語、IT関連、Java

コメント数の表示
ブログ書いた人の表示
chatGPTの説明
JavaScriptの良さ
<!DOCTYPE html>
<html>
    <head>
        <title>入力フォーム</title>
    </head>
    <body>

        <input type="text" id="user_name" placeholder="著者名">
        <button onclick="user_nameCheck();">検索</button> 
        
        <br>
        <br>

        <input type="text" id="title" placeholder="タイトル名">
        <button onclick="titleCheck();">検索</button>
        <h5 class="Error" id="myTableError"></h5>

        <table id="myTable">
            <!-- ここに項目を追加する -->
        </table>

        <script>
            'use strict';

            function tableReset() {
                const table = document.getElementById("myTable");
                while (table.firstChild) {
                    table.removeChild(table.firstChild);
                }
            }

            const Article = [];

            Article.push({ user_name: 'わらびもち', title: '日本はいい天気です' });
            Article.push({ user_name: 'サーモン', title: '日本は元気' });
            Article.push({ user_name: 'タナカ', title: 'お寿司大好き' });
            Article.push({ user_name: 'わらび', title: 'サーモンたまらん' });

            function user_nameCheck() {
                var input = document.getElementById('user_name').value;

                if (input === "") {
                    tableReset();
                    document.getElementById("myTableError").innerText = "未入力のまま検索はできません";
                    return;
                }

                const regex = new RegExp(input);

                let displayIndex = [4];
                let count = 0;

                for (let i = 0; i < 4; i++) {
                    const stringMatch = regex.test(Article[i]["user_name"]);
                    if (stringMatch) {
                        displayIndex[count] = i;
                        count++;
                    }
                }
                if (count === 0) {
                    document.getElementById("myTableError").innerText = "著者名'" + input + "'の検索結果 0件";
                    tableReset();
                }
                else {
                    document.getElementById("myTableError").innerText = "著者名'" + input + "'の検索結果 " + count + "件";
                    tableReset();

                    const table = document.getElementById("myTable");

                    for (let i = 0; i < count; i++) {
                        const tr = document.createElement("tr");
                        const td = document.createElement("td");
                        const link = document.createElement("a");

                        link.href = "https://example.com/item/" + (i + 1); 
                        link.textContent = Article[displayIndex[i]]["title"];

                        const text = document.createTextNode(Article[displayIndex[i]]["user_name"]);

                        td.appendChild(link);
                        td.appendChild(text);
                        tr.appendChild(td);
                        table.appendChild(tr);
                    }
                }
            }

            function titleCheck() {
                var input = document.getElementById('title').value;

                if (input === "") {
                    tableReset();
                    document.getElementById("myTableError").innerText = "未入力のまま検索はできません";
                    return;
                }

                const regex = new RegExp(input);
                
                let displayIndex = [4];
                let count = 0;

                for (let i = 0; i < 4; i++) {
                    const stringMatch = regex.test(Article[i]["title"]);
                    if (stringMatch) {
                        displayIndex[count] = i;
                        count++;
                    }
                }
                if (count === 0) {
                    document.getElementById("myTableError").innerText = "タイトル名'" + input + "'の検索結果 0件";
                    tableReset();
                }
                else {
                    document.getElementById("myTableError").innerText = "タイトル名'" + input + "'の検索結果 " + count + "件";
                    tableReset();

                    const table = document.getElementById("myTable");

                    for (let i = 0; i < count; i++) {
                        const tr = document.createElement("tr");
                        const td = document.createElement("td");
                        const link = document.createElement("a");

                        link.href = "https://example.com/item/" + (i + 1); 
                        link.textContent = Article[displayIndex[i]]["title"];

                        const text = document.createTextNode(Article[displayIndex[i]]["user_name"]);

                        td.appendChild(link);
                        td.appendChild(text);
                        tr.appendChild(td);
                        table.appendChild(tr);
                    }
                }
            }
        </script>
    </body>
</html>