どこが間違えてるか教えて頂きたいです。

js
1document.addEventListener('DOMContentLoaded', function () {
2    document.getElementById('bathmat').addEventListener(
3        'click', function () {
4            document.getElementById('status').getElementsByTagName('p')[0].textContent =
5                "名前：" + document.getElementById('char_name').value;
6
7            let type_name = document.createElement('p');
8            let personality = document.createElement('p');
9            let flavor = document.createElement('p');
10            let type_name_for_status = "";
11
12            let temp = document.getElementsByName("type");
13            for (let i = 0, len = temp.length, i <len, i++) {
14                if (temp[0].checked) {
15                    type_name.textContent = "種族：" + temp[i].value;
16                    type_name_for_status = temp[i].value;
17                    break;
18                }
19            }
20
21            temp = document.getElementsByName("personality")[0].options;
22            personality.textContent = "性格：";
23            for (let i = 0, len = temp.length; i <= len; i++) {
24                if (temp[i].selected) {
25                    personality.textContent += temp[i].value + ",";
26                }
27            }
28
29            flavor.textContent = "フレーバー：" + document.getElementsByName("flavor").value;
30
31            let stations = document.getElementById('status');
32            status.appendChild(type_name);
33            status.appendChild(personality);
34            status.appendChild(flavor);
35
36            let hp = Math.round(Math.random() * 10);
37            let strength = Math.round(Math.random() * 10);
38            let intelligence = Math.round(Math.random() * 10);
39            let speed = Math.round(Math.random() * 10);
40            switch (type_name_for_status) {
41                case "human":
42                    hp *= 2;
43                case "elf":
44                    intelligence *= 2;
45                case "dwarf":
46                    strength *= 2;
47                case "therianthrope":
48                    speed *= 2;
49            }
50            let param = document.createElement('p');
51            param = "HP:" + hp + ", STR:" + strength + ",INT:" + intelligence + ",AGI:" + speed;
52            // status.appendChild(param);
53        }, false);
54}, false);

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8" />
6    <title>DOM操作で色々遊ぼう</title>
7</head>
8
9<body>
10    <div id="exercise23">
11        <form action="" method="post">
12            <p>
13                <label for="status">キャラクター名を入力してね：</label>
14                <input id="char_name" type="text" size="30" />
15            </p>
16            <p>
17                種族を選んでね：
18                <input type="radio" name="type" value="human">人間
19                <input type="radio" name="type" value="elf">エルフ
20                <input type="radio" name="type" value="dwarf">ドワーフ
21                <input type="radio" name="type" value="therianthrope">獣人
22            </p>
23            <p>
24                性格を選んでね（ctrlを押しながらで複数選択可）：
25                <select name="personality" multiple>
26                    <option value="ずぶとい">ずぶとい</option>
27                    <option value="ひかえめ">ひかえめ</option>
28                    <option value="おだやか">おだやか</option>
29                    <option value="おくびょう">おくびょう</option>
30                    <option value="さみしがり">さみしがり</option>
31                    <option value="おっとり">おっとり</option>
32                    <option value="おとなしい">おとなしい</option>
33                    <option value="せっかち">せっかち</option>
34                    <option value="いじっぱり">いじっぱり</option>
35                    <option value="わんぱく">わんぱく</option>
36                    <option value="しんちょう">しんちょう</option>
37                    <option value="ようき">ようき</option>
38                    <option value="やんちゃ">やんちゃ</option>
39                    <option value="のうてんき">のうてんき</option>
40                    <option value="うっかりや">うっかりや</option>
41                    <option value="むじゃき">むじゃき</option>
42                    <option value="ゆうかん">ゆうかん</option>
43                    <option value="のんき">のんき</option>
44                    <option value="れいせい">れいせい</option>
45                    <option value="なまいき">なまいき</option>
46                </select>
47            </p>
48            <p>
49                フレーバーテキストを入力してね：<br>
50                <textarea name="flavor" rows="4" cols="40"
51                    placeholder="なんとなく雰囲気を出すための文章です．説明文でもいいしセリフでも良いので，何かしら書いて見ましょう．"></textarea>
52            </p>
53            <input id="submit" type="button" value="決定!" />
54        </form>
55        <div id="status">
56            <p>名前：</p>
57        </div>
58    </div>
59    <script type="text/javascript" src="client.js"></script>
60</body>
61
62</html>

int32_t

2022/01/17 00:31 編集

どんなエラーが出たのか、正確に書いてください。あとHTMLも開示してください。

y_waiwai

2022/01/17 02:21

エラーが出たなら、エラーメッセージを提示しましょうエラーメッセージは、いらぬ翻訳省略しないで、出たそのママをコピペで提示してくださいまた、コードは、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

masoya

2022/01/17 12:01

わかりました。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

for (let i = 0, len = temp.length, i <len, i++) {//Error
for (let i = 0, len = temp.length; i <len; i++) {

flavor.textContent = "フレーバー：" + document.getElementsByName("flavor").value;//Error
flavor.textContent = "フレーバー：" + document.getElementsByName("flavor")[0].value;

これ以降の case に break; がない。
switch (type_name_for_status) {
hp *= 2; break;

querySelector, querySelectorAll を利用すべきだ。

投稿2022/01/17 17:11