Делаю сайт, программа правильная, но выдает ошибку, в чем проблема?

Question

[1Nuuk]

const model = [
 {type: 'title', value: 'helloy world from js'},
 {type: 'text', value: 'here we go wi'},
 {type: 'columns', value: [
  '11111111',
  '22222222',
  '333333333',
 ]}
]

const $site = document.querySelector( '#sete' );

model.forEach(block => {
 let html = ''
 if (block.type === 'title') {
 html =`
  <div class="row">
   <div class="col-sm">
    <h1>${block.value}</h1>
   </div>
  </div>
 `
 }else if (block.type === 'text') {
 html = `
 <div class="row">
   <div class="col-sm">
    <p>$(block.value)</p>
   </div>
  </div>
 `
 }else if (block.type === 'columns') {

 }

 $site.insertAdjacentHTML('beforebegin', html); 

})

Ошибка такая;

index.js:35 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')
    at index.js
    at Array.forEach (<anonymous>)
    at

Comments

[Алексей Ярков]

Cannot read properties of null (reading 'insertAdjacentHTML')

Что из этого непонятно? Вам перевести помочь?

[WbICHA]

программа правильная

но выдает ошибку

Значит "неправильная".

[VoidVolker]

1Nuuk Правила 3.8

[1Nuuk]

Алексей Ярков, знаю я как это переводится, но как решить данную проблему не знала
злые вы тут все

Answer 1

[Вадим]

переменная $site = null.
такое происходит когда querySelector не нашёл в разметке ничего подходящего.
Либо опечатка в селекторе, либо элемент, который вы через селектор ищите - подгружается диинамически и позже описанного кода, соответтсвенно, на момент его выполнения в разметке такого элемента нет.

Answer 2

[Олег]

Если "правильный" код работает "неправильно", то он вызывается в "неправильное время".
Вот для начала https://habr.com/ru/companies/yandex/articles/718084/

От себя скажу упрощенно.
Страница это обычно куча подключаемых файлов. Броузер дотягивает их в 5 потоков.
У вас может все нормально работать при первой загрузке страницы, а при возврате падать в ошибку.
Тут проявляется работа кеша. Код из выше подключенного скрипта успевал отработать пока грузился следующий.

И бонус. Синтаксическая ошибка в каком то левом месте может аукнуться не работой всего остального кода.