Javascript-форум - Динамическая страница, РГЗ (новичок в js)

Здравствуйте, у меня есть задание по ргз, создать динамическую страницу HTML с использованием XML and XSLT технологиями. Конечно не совсем по теме, но, преподаватель разрешил свою тему в базе курса информатики. Я решил создать страницу с js. Но вот я в этом деле мало что понимаю, и есть у меня уже простая заготовка, которую я приведу ниже. Суть действий в следующем. Хочу создать страницу, в которой можно написать имя персонажа (вводим в поле Ник и он дублируется на так называемым листе персонажа ниже или с боку), после выбрать из списка класс и расу персонажа( с выводом класса и расы в том же листе ).
После нажатия кнопки чтоб выводилось значение характеристик в листе
//
Сила
Мана
Жизнь
Защита
Аура
//
Код имею пака самый простой, и не понимаю пака как применять всё задуманное через скрипт, подскажите?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>SCRIPT!</TITLE>

</HEAD>

<BODY>
<div id=clases>
Выберете клас <select><optgroup label="Герои ближнего боя">
<option value="1">Рыцарь</option>
<option value="2">Варвар</option>
</optgroup><optgroup label="Герои дальнего боя">
<option value="3">Лучник</option>
</optgroup><optgroup label="Герои использующие волшебство">
<option value="4">Маг</option>
<option value="5">Чародей</option></select>
<input type="button" value="Выбрать" onclick="pickclase()" />
</div>
<script>

var clases_div = document.getElementById("clases");function pickclase(){

clases.innerHTML = 'Выберете расу <select> <option value="100">Человек</option><option value="102">Гном</option><option value="103">Эльф</option><option value="104">Орк</option></select><input type="button" value="Выбрать" onclick="pickrace()" />';
}

</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>SCRIPT!</TITLE> </HEAD> <BODY> <div id=clases> Выберете клас <select><optgroup label="Герои ближнего боя"> <option value="1">Рыцарь</option> <option value="2">Варвар</option> </optgroup><optgroup label="Герои дальнего боя"> <option value="3">Лучник</option> </optgroup><optgroup label="Герои использующие волшебство"> <option value="4">Маг</option> <option value="5">Чародей</option></select> <input type="button" value="Выбрать" onclick="pickclase()" /> </div> <script> var clases_div = document.getElementById("clases");function pickclase(){ clases.innerHTML = 'Выберете расу <select> <option value="100">Человек</option><option value="102">Гном</option><option value="103">Эльф</option><option value="104">Орк</option></select><input type="button" value="Выбрать" onclick="pickrace()" />'; } </script> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>SCRIPT!</TITLE> </HEAD> <BODY> <div id="clases"> <div> Ник: <input type="text" data-target="char_login"/> </div> Выберете класс <select data-target="char_class"> <optgroup label="Герои ближнего боя"> <option value="1">Рыцарь</option> <option value="2">Варвар</option> </optgroup> <optgroup label="Герои дальнего боя"> <option value="3">Лучник</option> </optgroup> <optgroup label="Герои использующие волшебство"> <option value="4">Маг</option> <option value="5">Чародей</option> </optgroup> </select> <input type="button" value="Выбрать" id="choice"/> </div> <div class="char_info"> <div> Ник: <span data-id="char_login"></span> </div> <div> Класс: <span data-id="char_class"></span> </div> </div> <script> var d=document,m='querySelector'; d[m]('#choice').addEventListener('click',function(){ [].forEach.call(d[m+'All']('[data-target]'),function(node){ d[m]('[data-id="'+node.dataset.target+'"]').innerHTML= node.tagName.toLowerCase()=='select'? node[m]('option[value="'+node.value+'"]').innerHTML: node.value; }); }); </script> </body> </html>