js
document.addEventListener('DOMContentLoaded', function () { document.getElementById('bathmat').addEventListener( 'click', function () { document.getElementById('status').getElementsByTagName('p')[0].textContent = "名前:" + document.getElementById('char_name').value; let type_name = document.createElement('p'); let personality = document.createElement('p'); let flavor = document.createElement('p'); let type_name_for_status = ""; let temp = document.getElementsByName("type"); for (let i = 0, len = temp.length, i <len, i++) { if (temp[0].checked) { type_name.textContent = "種族:" + temp[i].value; type_name_for_status = temp[i].value; break; } } temp = document.getElementsByName("personality")[0].options; personality.textContent = "性格:"; for (let i = 0, len = temp.length; i <= len; i++) { if (temp[i].selected) { personality.textContent += temp[i].value + ","; } } flavor.textContent = "フレーバー:" + document.getElementsByName("flavor").value; let stations = document.getElementById('status'); status.appendChild(type_name); status.appendChild(personality); status.appendChild(flavor); let hp = Math.round(Math.random() * 10); let strength = Math.round(Math.random() * 10); let intelligence = Math.round(Math.random() * 10); let speed = Math.round(Math.random() * 10); switch (type_name_for_status) { case "human": hp *= 2; case "elf": intelligence *= 2; case "dwarf": strength *= 2; case "therianthrope": speed *= 2; } let param = document.createElement('p'); param = "HP:" + hp + ", STR:" + strength + ",INT:" + intelligence + ",AGI:" + speed; // status.appendChild(param); }, false); }, false);
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>DOM操作で色々遊ぼう</title> </head> <body> <div id="exercise23"> <form action="" method="post"> <p> <label for="status">キャラクター名を入力してね:</label> <input id="char_name" type="text" size="30" /> </p> <p> 種族を選んでね: <input type="radio" name="type" value="human">人間 <input type="radio" name="type" value="elf">エルフ <input type="radio" name="type" value="dwarf">ドワーフ <input type="radio" name="type" value="therianthrope">獣人 </p> <p> 性格を選んでね(ctrlを押しながらで複数選択可): <select name="personality" multiple> <option value="ずぶとい">ずぶとい</option> <option value="ひかえめ">ひかえめ</option> <option value="おだやか">おだやか</option> <option value="おくびょう">おくびょう</option> <option value="さみしがり">さみしがり</option> <option value="おっとり">おっとり</option> <option value="おとなしい">おとなしい</option> <option value="せっかち">せっかち</option> <option value="いじっぱり">いじっぱり</option> <option value="わんぱく">わんぱく</option> <option value="しんちょう">しんちょう</option> <option value="ようき">ようき</option> <option value="やんちゃ">やんちゃ</option> <option value="のうてんき">のうてんき</option> <option value="うっかりや">うっかりや</option> <option value="むじゃき">むじゃき</option> <option value="ゆうかん">ゆうかん</option> <option value="のんき">のんき</option> <option value="れいせい">れいせい</option> <option value="なまいき">なまいき</option> </select> </p> <p> フレーバーテキストを入力してね:<br> <textarea name="flavor" rows="4" cols="40" placeholder="なんとなく雰囲気を出すための文章です.説明文でもいいしセリフでも良いので,何かしら書いて見ましょう."></textarea> </p> <input id="submit" type="button" value="決定!" /> </form> <div id="status"> <p>名前:</p> </div> </div> <script type="text/javascript" src="client.js"></script> </body> </html>
まだ回答がついていません
会員登録して回答してみよう