17.07.2018, 23:15
|
 |
Интересующийся
|
|
Регистрация: 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>
|
Заранее спасибо
|
|
17.07.2018, 23:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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.
|
|
18.07.2018, 00:34
|
|
Интересующийся
|
|
Регистрация: 25.04.2011
Сообщений: 25
|
|
|
Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию моего кода, если такое конечно возможно.
|
|
18.07.2018, 00:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от kyivprogs
|
|
Блин, это не совсем то что мне нужно, мне цикл не подходит, так как alert("див1") это статический текст, а мне нужно сохранить конструкцию, если такое конечно возможно.
|
переведи или обьясни, что в коде не так? |
|
18.07.2018, 00:45
|
|
Интересующийся
|
|
Регистрация: 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);
}
|
|
18.07.2018, 00:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
kyivprogs,
не понимаю, добавил только текст для алерта, смотрите код выше, далее я пас.
|
|
18.07.2018, 00:51
|
|
Интересующийся
|
|
Регистрация: 25.04.2011
Сообщений: 25
|
|
|
вот посмотрите мой полный корявый китайский код, поймете
|
|
18.07.2018, 01:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
kyivprogs,
что должно произойти при клике на кнопку ok_button, зачем три функции?
|
|
18.07.2018, 01:02
|
|
Интересующийся
|
|
Регистрация: 25.04.2011
Сообщений: 25
|
|
|
должен слепиться текст в зависимости от того какая радио-кнопка была нажата
|
|
18.07.2018, 01:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от kyivprogs
|
|
должен слепиться текст в зависимости от того какая радио-кнопка была нажата
|
чем пост№ 2 не устраивает, чего не хватает? |
|
|
|
