Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не корректно работает обработчик событий (https://javascript.ru/forum/events/74519-ne-korrektno-rabotaet-obrabotchik-sobytijj.html)

kyivprogs 17.07.2018 23:15

Не корректно работает обработчик событий
 
О здравствуйте уважаемые гуру, подскажите мне олуху, что я напортачил неправильно?
Есть форма с 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>

Заранее спасибо

рони 17.07.2018 23:50

kyivprogs,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
    .onediv,.twodiv,.threediv{
        display: none;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector("form");
    text = ["я окно Див1","я окно Див2","я окно Див3"];
    form.addEventListener("click", function rating(event) {
        var check = form.querySelector(":checked"),
            indexChecked = [].indexOf.call(form.querySelectorAll('[name="radiob"]'), check);
        if (indexChecked != -1) {
            var divs = form.querySelectorAll("div");
            [].forEach.call(divs, function(div, i) {
                div.style.display = i > indexChecked ? "" : "block"
            });
            if (event.target.type == "button") {
            alert(text[indexChecked]);
            //form.removeEventListener("click", rating)
            }
        }
    })
});
</script>
</head>
<body>
<form>
<input type="radio" name="radiob"  id="one"/><label for="one">1</label><br/>
<input type="radio" name="radiob"  id="two"/><label for="two">2</label><br/>
<input type="radio" name="radiob"  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>

kyivprogs 18.07.2018 00:34

Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию моего кода, если такое конечно возможно.

рони 18.07.2018 00:38

Цитата:

Сообщение от kyivprogs
Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию, если такое конечно возможно.

переведи или обьясни, что в коде не так?

kyivprogs 18.07.2018 00:45

конструкция кода
<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>

должна быть сохранена function function2 (){
alert("я окно Див2");
ok_button.removeEventListener("click", function2);
}

рони 18.07.2018 00:49

kyivprogs,
не понимаю, добавил только текст для алерта, смотрите код выше, далее я пас.

kyivprogs 18.07.2018 00:51

вот посмотрите мой полный корявый китайский код, поймете

рони 18.07.2018 01:00

kyivprogs,
что должно произойти при клике на кнопку ok_button, зачем три функции?

kyivprogs 18.07.2018 01:02

должен слепиться текст в зависимости от того какая радио-кнопка была нажата

рони 18.07.2018 01:03

Цитата:

Сообщение от kyivprogs
должен слепиться текст в зависимости от того какая радио-кнопка была нажата

чем пост№ 2 не устраивает, чего не хватает?


Часовой пояс GMT +3, время: 17:49.