Появление и исчезновение блоков по клику

@kvant355 · Регистрация: 21.07.2013

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
function(){   
  var link = document.getElementById("butt");
  link.onclick = function (){    
     document.getElementById('text').style.display = 'block';
     document.getElementById('text1').style.display = 'none';
     document.getElementById('butt').style.display = 'none';
     return true;
  }
}
 
</script>

HTML5
1
2
3
4
5
6
7
8
9
<a href="#" id="butt">TEST</a>
 
<div id="text">
    My Text
</div>
 
<div id="text1" style="display: none;">
    My Text1
</div>

Почему у меня этот код не работает?
В итоге должно получиться так, сначала отображается блок id="text" и кнопка id="butt"
После нажатия должны пропадать блок id="text" и кнопка id="butt" и появляться блок id="text1"

Добавлено через 16 минут
Точнее мне кнопка нужна в виде формы и чтобы форма с кнопкой после нажатия пропадала, так же пропадал блок id="text" и появляться блок id="text1". Вот что написал, тоже не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(function(){
        $('#form').on('submit', '#form_action', function(e) {
            e.preventDefault();
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'none';
            document.getElementById('form').style.display = 'none';
            return true;
        });
});
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
                <div id="text" style="display: none;">
                My Text
            </div>
            <div id="text1">
                My Text1
            </div>
            
        <div id="form">
            <form id="form_action">
                <input type="checkbox" /> <br>
                <input type="submit" />
            </form>
        </div>

@atanov · 17.11.2018, 10:16

kvant355, попробуете так:

HTML5
1
2
3
4
5
6
7
8
<button id="butt">TEST</button>
<div id="text">
    My Text
</div>
<div id="text1" style="display: none;">
    My Text1
</div>
<script src  = "97.js"></script>

JavaScript
1
2
3
4
5
6
7
document.getElementById('butt').addEventListener('click', hideDivs);
function hideDivs()
{
    document.getElementById('text').style.display = 'none';
    document.getElementById('text1').style.display = 'block';
    this.style.display = 'none';
}

@kvant355 · 17.11.2018, 12:06 **[ТС]**

Спасибо! отлично работает!

А как то же самое сделать для формы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="text" style="display: none;">
       My Text
</div>
<div id="text1">
     My Text1
 </div>
            
        <div id="form">
            <form id="form_action">
                <input type="checkbox" /> <br>
                <input type="submit" />
            </form>
        </div>

@atanov · 17.11.2018, 12:28

kvant355, нужно убрать из формы кнопку отправить, т.к. при клике на неё страница перезагрузиться и вернётся к начальному состоянию.

HTML5
1
2
3
4
5
6
7
8
 <div id="form">form below will hide
            <form id="form_action">
                <input type="checkbox" /> <br>
                <!-- <input type="submit" /> -->
            </form>
            <button>submit</button>
</div>
<script src  = "98.js"></script>

JavaScript
1
2
3
4
5
6
document.getElementsByTagName('button')[0].addEventListener('click', hideForm);
function hideForm()
{
    document.getElementById('form_action').style.display = 'none';
    document.getElementsByTagName('button')[0].style.display = 'none';
}

@kvant355 · 17.11.2018, 12:37 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
document.getElementsByTagName('button')[0].addEventListener('click', hideForm);
function hideForm()
{
        document.getElementById('form_action').style.display = 'none';
    document.getElementsByTagName('button')[0].style.display = 'none';
     document.getElementById('text').style.display = 'none';
    document.getElementById('text1').style.display = 'block';
    this.style.display = 'none';
}

@atanov · 17.11.2018, 12:47

Сообщение от kvant355

чтобы проверить установлен ли чекбокс

Поподробнее? Для чего проверяется? Проверить просто:

JavaScript
1
2
if(element.checked == true)
...

А ещё лучше обрисуйте, что Вы хотите сделать.

@kvant355 · 17.11.2018, 12:55 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="text" style="display: none;">
       <a href="#">ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</a>
</div>
 
<div id="text1">
     Для участия вы должны принять <a href="ссылка_на_условия">условия  отказа от участия</a>
     <form id="form_action">
          <input type="checkbox" /><span>Принять условия</span>
          <input type="submit" />
          <button>submit</button>
      </form>
 </div>

Есть 2 блока, один с кнопкой ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ, и он скрыт до тех пор, пока потенциальный участник не поставит чекбокс на "принять условия" и не нажмет submit. Как только он это проделал, кнопка submit пропадает и появляется блок text с кнопкой "ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ"

@atanov · 17.11.2018, 13:03

kvant355, вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<div id="text" style="display: none;">
       <a href="#">ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</a>
</div>
<div id="text1">
     Для участия вы должны принять <a href="ссылка_на_условия">условия  отказа от участия</a>
          <input type="checkbox"><span>Принять условия</span>
          <button>submit</button>
</div>
<script src = "98.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
document.getElementsByTagName('button')[0].addEventListener('click', hideDiv);
function hideDiv()
{
    if(document.getElementsByTagName('input')[0].checked == true)
    {
        document.getElementById('text1').style.display = 'none';
        document.getElementById('text').style.display = 'block';
    }
}

@kvant355 · 17.11.2018, 13:06 **[ТС]**

atanov, спасибо большое, это то что надо!!!

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

Появление и исчезновение блоков по клику

Решение

Решение

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	17.11.2018, 13:06 [ТС]
	atanov, спасибо большое, это то что надо!!! 0