Изотоп Javascript JS базовый пример не работает

Я пытаюсь заставить изотопный javascript работать на тестовой странице.

Я пытаюсь получить их пример фильтрации с использованием изотопов. (Stackru не позволяет мне опубликовать ссылку, поскольку я новичок в публикации здесь...!)

Я скопировал их примеры HTML, CSS и vanilla JS на тестовую страницу здесь, в моем домене: http://chrislydon.co.uk/testiso.php

(Файл php, потому что я хочу протестировать добавление элементов из БД MySQL, когда базовая вещь работает!)

Я думаю, что у меня есть все, что мне нужно: ссылка на изотопный JS в голове, их JS, скопированный между тегами - и их точный HTML (и CSS).

Я следую примеру, который был помечен как "Vanilla JS" (так как другие их примеры опираются на JQuery (который я буду реализовывать в конце концов...))

Я не вижу, что я делаю неправильно, это означает, что эта дословная копия их примера не будет работать....

(Пробовал в разных браузерах - их примеры работают в них, но мой скопированный пример не работает)

Я в порядке с PHP/HTML, но сделал только базовые вещи в JS, так что, возможно, я упускаю что-то ужасно очевидное!

Спасибо за любую помощь, которую вы можете предложить!

Источник

1 ответ

Решение

Были две основные проблемы:

1) в <head> документа, ваш <script> в теге отсутствует >: <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js‌​"</script>

Изменить на:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js‌​"></script>

2) Если вышеуказанный инициализатор работает в <head> документа, не будет документа, доступного для запроса и document.querySelector('.grid') вернусь null,

Вместо этого поместите сценарий непосредственно перед </body> тег.

Рабочая jsFiddle:

https://jsfiddle.net/dptve3s6/1

Бонус: у вас есть функция под названием myFunction прикреплен к кнопке onClick событие, но эта функция нигде не определена. Определите это и наслаждайтесь.

Источник
Другие вопросы по тегам