Почему не закрывается блок JS?

Question

[dieiN]

<script type="text/javascript">
	document.querySelector('.youtube_block button').addEventListener('click', () => {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block')
})
</script>
<style>
  .youtube_block {
  background: #c4302b;
  display: flex;
  justify-content: space-around;
	height: 33px;
		}
	.hide_youtube_block {
  display: none;
	}
</style>
<div class="youtube_block">
  <p style="margin-left: -20px;"><a href="https://www.youtube.com" target="_blank"><img src="" width="32px" heiht="32px" style="padding: 5px;">Ознакомтесь с нашим YouTube каналом</a></p>
  <button class="youtube_block_button">close</button>
</div>

Никакие JS библиотеки не подключал.
Пример взял отсюда: https://codepen.io/anon/pen/NQdwMK

Answer 1

[Stanislav Lavrentev]

Код JavaScript переместить вниз ? Он запускается до того как html теги создаются.

Answer 2

[fallus]

Скорей всего, потому что скрипт находится до всех нужных элементов.
Самих элементов ещё нет, а скрипт уже делает выборку селекторам, которых ещё нет в DOM.
Либо переместить скрипт под разметку, либо так:

window.onload = function(){

  document.querySelector('.youtube_block button').addEventListener('click', () => {
    document.querySelector('.youtube_block').classList.add('hide_youtube_block')
  })

}

Answer 3

[Сергей Карвасарный]

или как выше написали или

document.addEventListener("DOMContentLoaded", function(){
Ваш код
});

Comments

[dieiN]

Как сделать чтоб при перезагрузки страницы, этот блок не всплывал снова?

[Сергей Карвасарный]

dieiN, все что писали подразумевает срабатывания при загрузке страницы
window.onload = function(){
или document.addEventListener("DOMContentLoaded", function(){
т.е страница загрузилась сработал скрипт, если нужно при нажатии или еще при чем, то уже нужно писать совсем по другому, нужно понимать какая цель и как и когда это должно работать но в вопросе это не указано))