Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2018, 23:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

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

Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию моего кода, если такое конечно возможно.
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2018, 00:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от kyivprogs
Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию, если такое конечно возможно.
переведи или обьясни, что в коде не так?
Ответить с цитированием
  #5 (permalink)  
Старый 18.07.2018, 00:45
Аватар для kyivprogs
Интересующийся
Отправить личное сообщение для kyivprogs Посмотреть профиль Найти все сообщения от kyivprogs
 
Регистрация: 25.04.2011
Сообщений: 25

конструкция кода
<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);
}
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2018, 00:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

kyivprogs,
не понимаю, добавил только текст для алерта, смотрите код выше, далее я пас.
Ответить с цитированием
  #7 (permalink)  
Старый 18.07.2018, 00:51
Аватар для kyivprogs
Интересующийся
Отправить личное сообщение для kyivprogs Посмотреть профиль Найти все сообщения от kyivprogs
 
Регистрация: 25.04.2011
Сообщений: 25

вот посмотрите мой полный корявый китайский код, поймете
Ответить с цитированием
  #8 (permalink)  
Старый 18.07.2018, 01:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

kyivprogs,
что должно произойти при клике на кнопку ok_button, зачем три функции?
Ответить с цитированием
  #9 (permalink)  
Старый 18.07.2018, 01:02
Аватар для kyivprogs
Интересующийся
Отправить личное сообщение для kyivprogs Посмотреть профиль Найти все сообщения от kyivprogs
 
Регистрация: 25.04.2011
Сообщений: 25

должен слепиться текст в зависимости от того какая радио-кнопка была нажата
Ответить с цитированием
  #10 (permalink)  
Старый 18.07.2018, 01:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от kyivprogs
должен слепиться текст в зависимости от того какая радио-кнопка была нажата
чем пост№ 2 не устраивает, чего не хватает?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Размножается обработчик событий demoniqus Общие вопросы Javascript 3 22.10.2012 14:04
не удается убрать обработчик событий. mitiya Общие вопросы Javascript 0 08.09.2012 21:18
Обработчик событий kucaeva Общие вопросы Javascript 2 10.12.2010 16:42
Не корректно работает slice Dotod Общие вопросы Javascript 20 30.01.2010 23:31
Opera не корректно работает со скриптом Anat.nem Opera, Safari и др. 4 30.10.2009 13:39