Виталий: Я не знаю какой профит вы хотите получить от кода по ссылке, но для того чтобы подставить код на языке javascript в html разметку используются шаблонизаторы.
К слову, var это инструкция объявления переменной(ых), основы.
Виталий: Тогда стоит более правильно излагать свою проблему, у вас же заголовок гласит следующее "Как вставить JS в HTML?", а тело проблемы написано на сумбурном диалекте, поэтому не понятно чего вы именно хотите, то ли узнать как вставить js код в html разметку, то ли вам нужно что-то исправить в коде, дабы работало.
Иван Соломенников: Спасибо! только не совсем понимаю, я пытался данный JS вставлять выше по коду и он при переносе НЕ работает. Как тогда на будущее правильно работать с JS, есть может правило где и как его вставлять?
Виталий: Если всё в одном файле, то вам нужно учитывать javascript событие "load", которое возбуждается после того как документ и все внешние ресурсы будут загружены полностью, поэтому я js код разместил в конце html кода, перед закрывающим тегом body.(то есть когда html разметка была загружена, выполняется наш js)
Если по части js нет вообще никакого опыта, то советую начать изучать, чтобы понимать как "оно" работает.
Виталий: Да, или выносить в отдельный файл с расширением *js и давать тегу скрипт атрибут "async", или же лучше слушать событие "load" объекта "window".
Все что было на codepen все целенаправленно скопировал для запуска, теги скрипт написал и все подключил. Но, что странно что не работает. + обычно я не замечал, чтобы код с Var начинался
