Показать сообщение отдельно
  #1 (permalink)  
Старый 17.07.2018, 23:15
Аватар для kyivprogs
Интересующийся
Отправить личное сообщение для kyivprogs Посмотреть профиль Найти все сообщения от kyivprogs
 
Регистрация: 25.04.2011
Сообщений: 25

Не корректно работает обработчик событий
О здравствуйте уважаемые гуру, подскажите мне олуху, что я напортачил неправильно?
Есть форма с 3-ма радио-кнопками по-нажатию радио-кнопки которой показывает скрытую область: радио-кнопка1 по-нажатию - показывает скрытый див1, радио-кнопка2 по-нажатию - показывает скрытый див2 и див1, радио-кнопка3 по-нажатию - показывает скрытый див3, див2, див1.
Есть кнопка button по-нажатию которой, если была выбрана радио-кнопка1 должен показаться див1 и выдать окно: я окно див1, если была выбрана радио-кнопка2 должен показаться див1 и див2 и выдать окно: я окно див2 и если была выбрана радио-кнопка3 должен показаться див1, див2, див3 и выдать окно: я окно див3. Я добавил методы addEventListener() и removeEventListener() но получается чушь.
Если выбрать радио-кнопку1 покажеться див1, а потом если нажать кнопку баттон покажет окно дива1, но если нажать повторно кнопку баттон то ничего не произойдет хотя должно было показать еще раз окно дива1, ну если опять кликнуть по радио-кнопке1 то покажет опять окно дива1, если кликнуть 5 раз по радио-кнопке1, а потом нажать кнопку баттон то покажет 5 раз окно дива1, но если нажать по очереди радио-кнопку1, радио-кнопку2, радио-кнопку3, а потом нажать кнопу баттон, то выдаст сначала окно див1, потом окно див2, затем окно див3. Где у меня накосячено не пойму?
Помогите, а то уже крыша едит
код привожу
Код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
	.onediv,.twodiv,.threediv{
		display: none;
	}
</style>
</head>
<body>
<form>
<input type="radio" name="radiob" onclick="javascript:authoCheck();" id="one"/><label for="one">1</label><br/>
<input type="radio" name="radiob" onclick="javascript:authoCheck();" id="two"/><label for="two">2</label><br/>
<input type="radio" name="radiob" onclick="javascript:authoCheck();" id="three"/><label for="three">3</label><br/>
<div class="onediv" id="onediv">див1</div>
<div class="twodiv" id="twodiv">див2</div>
<div class="threediv" id="threediv">див3</div><br/>
<input type="button" value="ok" id="ok_button">
</form>
</body>
</html>
и сам скрипт
<script>
function authoCheck(){
	if (document.getElementById('one').checked) {
		ok_button.addEventListener("click", function1);
		document.getElementById('onediv').style.display = 'block';
		document.getElementById('twodiv').style.display = 'none';
		document.getElementById('threediv').style.display = 'none';
		function function1 (){
			alert("я окно Див1");
			ok_button.removeEventListener("click", function1);
		}
	}
	if (document.getElementById('two').checked) {
		ok_button.addEventListener("click", function2);
		document.getElementById('onediv').style.display = 'block';
		document.getElementById('twodiv').style.display = 'block';
		document.getElementById('threediv').style.display = 'none';
		function function2 (){
			alert("я окно Див2");
			ok_button.removeEventListener("click", function2);
		}
	}
	if (document.getElementById('three').checked) {
		ok_button.addEventListener("click", function3);
		document.getElementById('onediv').style.display = 'block';
		document.getElementById('twodiv').style.display = 'block';
		document.getElementById('threediv').style.display = 'block';
		function function3 (){
			alert("я окно Див3");
			ok_button.removeEventListener("click", function3);
		}
	}
}
</script>
Заранее спасибо
Ответить с цитированием