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

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

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

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 подписчик
- вчера
- 135 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 156 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 136 просмотров
3

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Обработать фото в стиле ASCII

22 нояб. 2024, в 08:04

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

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

А где у вас в данном коде 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/

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

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

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

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