Слайдер по кнопке

@Revin · Регистрация: 27.05.2018

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

Приветствую, нужно сделать слайдер по двум кнопкам, влево и вправо, другими словами, простейшее скрытие\показ блоков, написал код, но он вообще не работает и отказывается реагировать:
Сам скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.getElementById('twoBlock').hidden = false;
    document.getElementById('threeBlock').hidden = false;   
 
    document.getElementById('left').onclick = function() {
        if(oneBlock == hidden) {
            document.getElementById('threeBlock' ).hidden = true;
            document.getElementById('twoBlock' ).hidden = false;
            document.getElementById('oneBlock' ).hidden = false;
        }
        else if(twoBlock == hidden) {
            document.getElementById('threeBlock' ).hidden = false;
            document.getElementById('twoBlock' ).hidden = false;
            document.getElementById('oneBlock' ).hidden = true;
        }
        else if(threeBlock == hidden) {
            document.getElementById('threeBlock' ).hidden = false;
            document.getElementById('twoBlock' ).hidden = true;
            document.getElementById('oneBlock' ).hidden = false;
        }

Верстка

HTML5
1
2
3
4
5
<p id="Left">Left</p>
   <p id="Right">Right</p>
   <div id="oneBlock"><p>1</p></div>
   <div id="twoBlock"><p>2</p></div>
   <div id="threeBlock"><p>3</p></div>

Благодарю за ранее, понимаю что просто, но я все равно не понимаю где допустил ошибку) Прошу прощение за глупость)

@Asiman · 04.01.2020, 01:52

Название id регистрозависимы, так что если тут:

HTML5
1
<p id="Left">Left</p>

то и тут должно быть так:

JavaScript
1
document.getElementById('Left').onclick = function() {

@Revin · 04.01.2020, 15:54 **[ТС]**

Asiman, исправил, но ничего не поменялось

@D_Vik · 04.01.2020, 17:45

В условии вы сравниваете состояние блока с некой переменной hidden :

JavaScript
1
else if (twoBlock == hidden) {

откройте консоль браузера и вы убедитесь что она не определена. Думаю в условии должно быть что то такое:

JavaScript
1
else if (twoBlock.hidden == false){

@fixeri · 05.01.2020, 19:37

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p id="left">Left</p>
    <p id="right">Right</p>
    <div id="oneBlock"><p>1</p></div>
    <div id="twoBlock"><p>2</p></div>
    <div id="threeBlock"><p>3</p></div>
 
    <script type="text/javascript">
        "use strict";
 
        let oneBlock = document.getElementById("oneBlock");
        let twoBlock = document.getElementById("twoBlock");
        let threeBlock = document.getElementById("threeBlock");
 
        twoBlock.hidden = true;
        threeBlock.hidden = true;   
 
        document.getElementById('left').onclick = function() {
            if (oneBlock.hidden === false) 
            {
                oneBlock.hidden = true;
                twoBlock.hidden = false;
            } 
            else if(twoBlock.hidden === false) 
            {
                twoBlock.hidden = true;
                threeBlock.hidden = false;
            } 
            else if (threeBlock.hidden === false) 
            {
                threeBlock.hidden = true;
                oneBlock.hidden = false;
            }
        };
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Revin 0 / 0 / 0 Регистрация: 27.05.2018 Сообщений: 53
	04.01.2020, 15:54 [ТС]
	Asiman, исправил, но ничего не поменялось 0

Слайдер по кнопке

Решение