Форум

Alex Pain · #1 (**permalink**) 04.12.2017, 05:54

Здравствуйте, у меня есть задание по ргз, создать динамическую страницу 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>

Alex Pain · #2 (**permalink**) 04.12.2017, 05:55

<!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>

Nexus · #3 (**permalink**) 04.12.2017, 10:09

Значения атрибутов тегов нужно указывать в кавычках.
Большинство тегов обязательно нужно закрывать.

Мне, когда учился, преподаватели тоже говорили, что принято открывающий тег писать капсом.
Никогда не видел, чтобы так действительно делали.

<!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>

рони · #4 (**permalink**) 04.12.2017, 10:10

Alex Pain,
https://javascript.ru/forum/dom-wind...tml#post471987

Alex Pain · #5 (**permalink**) 11.12.2017, 11:36

Спасибо, это практически то что мне нужно!

Форум

Справочник

Discord чат

Курсы javascript