Q&A
エラーが出たなら、エラーメッセージを提示しましょう
エラーメッセージは、いらぬ翻訳省略しないで、出たそのママをコピペで提示してください
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); 55
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>
html文章についてはほとんど間違えが無いみたいです。
Chrome で開き、F12 を押してください。そうすると赤丸に×でエラーが指摘されます。
for 文の文法が間違っています。
このように、目視ではなく、ちゃんとしたツールを使いましょう。
JavaScript に対応したエディタを使うだけでもエラー個所はわかります。
「どう動作させようとした」ものが、「実際にはどうなっている」状況なのでしょうか。
chromeでの開き方がわかりません、F12はMacだとどれに対応しているものなのでしょうか？
https://teratail.com/questions/mymb5lctcxaa9f こちらの回答は読みましたか?
すいません見ていませんでした。
>html文章についてはほとんど間違えが無いみたいです。
「ほとんど」は１００％ではないですし、文法は絶対なので「間違えがない」というのでしたら
根拠を提示された方が良いと思います。
(ちなみにhtmlinterでは100点になりません)
回答1件
0
ベストアンサー
１. まず、JS の for 文が間違っています。コンマとコロンを見極めてください。
javascript
1for (let i = 0, len = temp.length, i <len, i++) { 2 if (temp[0].checked) { 3 type_name.textContent = "種族：" + temp[i].value; 4 type_name_for_status = temp[i].value; 5 break; 6 } 7}
diff
1- for (let i = 0, len = temp.length, i <len, i++) { 2+ for (let i = 0, len = temp.length; i <len; i++) {
２. せっかく書いた処理が発火されていない
javascript
1document.getElementById('bathmat').addEventListener( 2 'click', function () { // ...
とありますが、bathmat という ID のついた要素がありません。
a. 決定ボタンの id を "submit" から id="bathmat" に変える
b. 処理を関数として宣言しておいて、<form onsubmit="func()" ... とする
などがあると思います。
デバッグの際は、ブラウザの開発者ツールのコンソールをぜひ見てみてください。
赤い文字を読めば、必ず原因が分かります。
投稿2022/01/19 10:09
総合スコア232
あなたの回答
tips
プレビュー
