Почему не работает код?

Question

Alex_87 @Alex_87

JavaScript

Почему не работает код?

Здравствуйте! Скажите пожалуйста, почему не работает код? Сложность состоит в том, что нет ошибки...

window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Открыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Закрыть';
	}
}

<a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>

Ошибка: TypeError: this.overlay is null

Вопрос задан более трёх лет назад
184 просмотра

7 комментариев

Подписаться 1 Простой 7 комментариев

gleendo @evgeniy8705

А где у вас в данном коде this.overlay ?
Demo

Написано более трёх лет назад
Alex_87 @Alex_87 Автор вопроса

iamevg_, у меня ещё один js код на странице... Могут ли они блокировать друг друга?

Написано более трёх лет назад
gleendo @evgeniy8705

Alex_87, Вам же ясно написали TypeError: this.overlay is null
ищите this.overlay и разбирайтесь почему он null
Предоставленный код тут не при чем

Написано более трёх лет назад
Alex_87 @Alex_87 Автор вопроса

iamevg_, это всё из-за "this" в функции?

Написано более трёх лет назад
gleendo @evgeniy8705

Alex_87, я не могу этого знать, код с this.overlay вы так и не показали же

Написано более трёх лет назад

Alex_87 @Alex_87 Автор вопроса

iamevg_,

Вот он, но и он до конца не работает... innerHTML не передаёт стили, а только содержание. Не знаете почему, как исправить?
/* Модальное окно */

    function Popup(options){
    this.modal = document.querySelector(options.modal);
    this.overlay = document.querySelector(options.overlay);

    var popup = this;

    this.open = function(content){
        popup.modal.innerHTML = content;
        popup.modal.classList.add('open');
        popup.overlay.classList.add('open');
    };
    this.close = function(){
        popup.overlay.classList.remove('open');
        popup.modal.classList.remove('open');
    };
    this.overlay.onclick = popup.close;
}

window.onload = function(){
    var p = new Popup({
        modal: '.modal',
        overlay: '.overlay'
    });

     
    document.querySelector('.for').onclick = function(){
    var form = document.querySelector('.form');
    p.open(form.innerHTML);
   };
};

Написано более трёх лет назад

Олег @politon
Подключай данный скрипт сосле
<a id="toggler" href="#">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div>

https://jsfiddle.net/Politonius/tztv98zr/
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

Alex_87 @Alex_87 Автор вопроса

Всё сделал, как вы сказали... Всё равно не работает. Ошибок нет! Хотя в jsfiddle у меня тоже заработал!

Написано более трёх лет назад
Олег @politon

Alex_87, Это весь кусок вашего кода?
Скрипт отдельно подключен?
Если отдельно, то путь правильный?...
И кэш задроченный почистить ;)
Вообщем года Ванга воскреснет - посмотрит))

Написано более трёх лет назад
Alex_87 @Alex_87 Автор вопроса

Олег, скрипт я скопировал вниз. Отдельно файл не подключал!

Написано более трёх лет назад

Олег @politon

100% рабочий

<!DOCTYPE html>
<html lang="ru">
  <head>
  </head>
  <body>
  <a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>
    <script>
    window.onload= function() {
        document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
           };
        };
    function openbox(id, toggler) {
        var div = document.getElementById(id);
        if(div.style.display == 'block') {
        div.style.display = 'none';
        toggler.innerHTML = 'Открыть';
     }else {
       div.style.display = 'block';
       toggler.innerHTML = 'Закрыть';
           }
        }
    </script>
  </body>
</html>

Написано более трёх лет назад

Alex_87 @Alex_87 Автор вопроса

Олег, Положил в отдельный файл и заработал) Спасибо вам большое! Не подскажите, если время есть, почему стили не передаются в модальное окно при использование innerHTML? У парня, что показывал код в действии он работал!

function Popup(options){
    this.modal = document.querySelector(options.modal);
    this.overlay = document.querySelector(options.overlay);

    var popup = this;

    this.open = function(content){
        popup.modal.innerHTML = content;
        popup.modal.classList.add('open');
        popup.overlay.classList.add('open');
    };
    this.close = function(){
        popup.overlay.classList.remove('open');
        popup.modal.classList.remove('open');
    };
    this.overlay.onclick = popup.close;
}

window.onload = function(){
    var p = new Popup({
        modal: '.modal',
        overlay: '.overlay'
    });

     
    document.querySelector('.for').onclick = function(){
    var form = document.querySelector('.form');
    p.open(form.innerHTML);
   };
};

Написано более трёх лет назад

Олег @politon

Alex_87, А мне откуда знать, что там и кто показывал))

Написано более трёх лет назад
Alex_87 @Alex_87 Автор вопроса

Олег, вот код. Я постарался убрать всё лишнее: https://yadi.sk/d/Um4fMhWl3NRwdZ

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как можно добиться чтобы при выводе строки в посредством JavaScript не игнорировались значения в class="..."?
- 1 подписчик
- 8 часов назад
- 73 просмотра
1

ответ
JavaScript

Простой
Как отправить post-запрос с сайта на localhost?
- 1 подписчик
- 8 часов назад
- 83 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать кнопку установки в PWA активной без клика на телефоне?
- 2 подписчика
- вчера
- 99 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как найти js код который обрабатывает событие?
- 1 подписчик
- вчера
- 106 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Почему яндекс метрика(эллектронная коммерция) выдает ошибку при отправке данных js?
- 1 подписчик
- вчера
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Почему при скролле Yandex-браузер тупит?
- 1 подписчик
- 27 мая
- 160 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Каким алгоритмом воспользоваться для поиска вхождений диапазона чисел в другой диапазон?
- 1 подписчик
- 26 мая
- 159 просмотров
3

ответа
JavaScript

Простой
Как сделать обработку событий для всех элементов в таблицы?
- 3 подписчика
- 26 мая
- 907 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Leaflet кастомные координаты или сетка координат?
- 1 подписчик
- 26 мая
- 94 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Почему не работают аннотации js?
- 1 подписчик
- 26 мая
- 117 просмотров
0

ответов
Показать ещё Загружается…

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

JavaScript FullStack разработчик

Rocket • Брянск

от 60 000 до 100 000 ₽

Нарисовать спрайты для пиксельной игры

29 мая 2024, в 21:16

1500 руб./за проект

Написать программу по численному моделированию

29 мая 2024, в 21:15

3000 руб./за проект

Сделать дизайн десяти картинок для игры в Steam

29 мая 2024, в 21:15

15000 руб./за проект

А где у вас в данном коде this.overlay ?
Demo
iamevg_, у меня ещё один js код на странице... Могут ли они блокировать друг друга?
Alex_87, Вам же ясно написали TypeError: this.overlay is null
ищите this.overlay и разбирайтесь почему он null
Предоставленный код тут не при чем
Alex_87, я не могу этого знать, код с this.overlay вы так и не показали же
iamevg_,
Вот он, но и он до конца не работает... innerHTML не передаёт стили, а только содержание. Не знаете почему, как исправить? /* Модальное окно */ function Popup(options){ this.modal = document.querySelector(options.modal); this.overlay = document.querySelector(options.overlay); var popup = this; this.open = function(content){ popup.modal.innerHTML = content; popup.modal.classList.add('open'); popup.overlay.classList.add('open'); }; this.close = function(){ popup.overlay.classList.remove('open'); popup.modal.classList.remove('open'); }; this.overlay.onclick = popup.close; } window.onload = function(){ var p = new Popup({ modal: '.modal', overlay: '.overlay' }); document.querySelector('.for').onclick = function(){ var form = document.querySelector('.form'); p.open(form.innerHTML); }; };
Подключай данный скрипт сосле
<a id="toggler" href="#">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div>

https://jsfiddle.net/Politonius/tztv98zr/

Answer 1 · 2017-10-03 04:14:00

Подключай данный скрипт после

<a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>

https://jsfiddle.net/Politonius/tztv98zr/

Почему не работает код?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт