updateTable()について

単語帳を作っているのですが
クリックしたら64行目のupdateTable()で行が追加されますよね。
では、86行目のupdateTable()はどういう役割ですか？
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>単語帳</title>
7</head>
8<body>
9    <h1>単語帳</h1>
10    <input type="text" placeholder="単語">
11    <input type="text" placeholder="意味">
12    <button id="btn">登録</button>
13    <p id="total">全0件</p>
14    <table id="table"></table>
15
16
17    <script>
18        'use strict';
19
20        //文書が読み込み終わったら処理を実行
21        window.onload = () => {
22            class Word {
23                //コンストラクター
24                constructor(en,ja) {
25                    this.en = en;
26                    this.ja = ja;
27                }
28
29                //メソッド
30                showInfo() {
31                    return `<td>${this.en}</td><td>${this.ja}</td>`;
32                }
33            }
34
35            //input要素をNodeListとして取得
36            const inputs = document.querySelectorAll('input');
37            //セレクタをもとに要素を取得
38            const btn = document.querySelector('#btn');
39            const total = document.querySelector('#total');
40            const table = document.querySelector('#table');
41
42            //空の配列を準備
43            let list = [];
44
45            //btnにクリックイベントを登録
46            btn.addEventListener('click', () => {
47                // 入力値を取得(前後についた無駄なスペースを除去)
48                const enValue = inputs[0].value.trim();
49                const jaValue = inputs[1].value.trim();
50
51                if (enValue === '' || jaValue === '') {
52                    alert('単語と意味を両方入力してください。');
53                    return;  // 入力が不正な場合は処理を中断
54                }
55
56                //Wordインスタンスを作成
57                let word = new Word(enValue, jaValue);
58                //インスタンスを配列に追加
59                list.push(word);
60                //すべてのinput要素を空欄にする
61                inputs.forEach((input) => {
62                    input.value = '';
63                });
64                updateTable();
65            });
66
67            function updateTable() {
68                //見出し行を作成
69                table.innerHTML = '<tr><th>単語</th><th>意味</th></tr>';
70
71                //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う)
72                list.forEach((word) => {
73                    //tr要素を作成
74                    let tr = document.createElement('tr');
75                    //trの子要素をhtmlが含まれた文字列で設定
76                    tr.innerHTML = word.showInfo();
77                    //table要素の子要素として作成したtr要素を追加
78                    table.appendChild(tr);
79                });
80
81                //total要素のテキストコンテントを設定
82                total.textContent = `全${list.length}件`;
83            }
84
85            
86            updateTable();
87        };
88    </script>
89    
90</body>
91</html>

juner

2024/10/22 07:01

ステップ実行したらわかると思われますが、初回実行ではないでしょうか？

zawber

2024/10/22 23:54

ステップ実行いうのがあるんですね。やってみよう

juner

2024/10/23 00:02

F12 で開発者ツールを開いてソースからブレークポイントを張ってデバッグ実行するとそこで止まるのでステップ実行していけばどの順番で実行されるかわかると思われます。 https://developer.mozilla.org/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools

zawber

2024/10/23 04:13

こういうのがあったんですけど、 https://tech.e3factory.com/programming/3726 難しそうなんで飛ばしたんです。またやってみます。