Как отредактировать код JS для правильной работы после вставки в HTML?

Question

[Виталий]

Здравствуйте, как отредактировать код JS чтобы он корректно отработал после вставки в HTML.
Сам код (оригинал): codepen.io/javve/pen/bBfgD
Мой код : https://dropmefiles.com/AzLrQ
Как правильно сделать?

Answer 1

[Иван Соломенников]

Если я вас правильно понял, то вам нужен шаблонизатор.
Например: Handlebars

Comments

[Виталий]

Я возможно не знаком, но если JS начинается с var это вопрос к шаблонизатору?

[Иван Соломенников]

Виталий: Шаблонизатор позволяет подставлять код, в текущем случае код js в html код.

[Виталий]

Иван Соломенников: Откровенно с темой не знаком, есть ли быстрый рецепт, который сможет оживить то что по ссылке, в целях изучения?

[Иван Соломенников]

Виталий: Я не знаю какой профит вы хотите получить от кода по ссылке, но для того чтобы подставить код на языке javascript в html разметку используются шаблонизаторы.
К слову, var это инструкция объявления переменной(ых), основы.

[Виталий]

Иван Соломенников: профит zero. Скорее интерес "почему не работает", хочу найти причину. Мало ли может известная проблема

[Иван Соломенников]

Виталий: Тогда стоит более правильно излагать свою проблему, у вас же заголовок гласит следующее "Как вставить JS в HTML?", а тело проблемы написано на сумбурном диалекте, поэтому не понятно чего вы именно хотите, то ли узнать как вставить js код в html разметку, то ли вам нужно что-то исправить в коде, дабы работало.

[Виталий]

Иван Соломенников: Вопрос исправлен

[Иван Соломенников]

Виталий: Например вот так можно, если я тебя правильно понимаю, только учти что библиотеки, будут у тебя подгружаться удалённо.

Javascript и css я тебе вынес всё в один файл. Ссылка: https://dropmefiles.com/XK6Yt

[Виталий]

Иван Соломенников: Спасибо! только не совсем понимаю, я пытался данный JS вставлять выше по коду и он при переносе НЕ работает. Как тогда на будущее правильно работать с JS, есть может правило где и как его вставлять?

[Иван Соломенников]

Виталий: Вы всё в один файл выносили?

[Виталий]

Иван Соломенников: На данном этапе да. Я скачал ваш файл и он работает. По нему и вопрос

[Иван Соломенников]

Виталий: Если всё в одном файле, то вам нужно учитывать javascript событие "load", которое возбуждается после того как документ и все внешние ресурсы будут загружены полностью, поэтому я js код разместил в конце html кода, перед закрывающим тегом body.(то есть когда html разметка была загружена, выполняется наш js)

Если по части js нет вообще никакого опыта, то советую начать изучать, чтобы понимать как "оно" работает.

[Виталий]

Иван Соломенников: Еще раз спасибо! При подключении скрипт вверху он так же не работает. т.е. исходя из логики требуется все равно крепить внизу?

[Иван Соломенников]

Виталий: Да, или выносить в отдельный файл с расширением *js и давать тегу скрипт атрибут "async", или же лучше слушать событие "load" объекта "window".

[Виталий]

Иван Соломенников: Понял, спасибо за помощь!

Answer 2

[Дима]

<script>код на JS</script> не подходит вам такой вариант? что именно не работает?

Comments

[Виталий]

codepen отказывается так сотрудничать. Да и если собирать в блокноте, то код по ссылке банально не рабоатет

[Дима]

CodePen > Settings > JavaScript > Add External scripts, это вам нужно?

[Виталий]

Дима: Я бы хотел код из codepen перенести в блокнот, занести JS в теги скрипт и посмотреть как оно рабоатет

Answer 3

[Gios]

Может вы не подключили js файлы в html?

поскольку в этом коде есть обєкты List и ListPagination.

Comments

[Виталий]

Все что было на codepen все целенаправленно скопировал для запуска, теги скрипт написал и все подключил. Но, что странно что не работает. + обычно я не замечал, чтобы код с Var начинался

[Виталий]

Артём Петренков: Данный код запускался в codepen и блокноте

[Виталий]

Артём Петренков: затупил, консоль пустая, нет ошибок. Пробовал вставлять в теги , результат -никакой

[Виталий]

Артём Петренков: Да в инструментах разработчика я их вижу

[Виталий]

Вот ссылка на тот болезненный файл https://dropmefiles.com/AzLrQ