Почему выдаёт ошибку Uncaught ReferenceError: clicked is not defined at HTMLButtonElement.onclick?

Question

[tuzovrr]

Пытаюсь скрыть определённый блок и добавить классы к другому блоку, но почему-то выдаёт ошибку. Уже кучу способов перепробовал, но всегда одно и то же.
Вот код html:

<div class="header_offer_wrapper">
    <a href="#" class="header_offer">
      <p>Подарочные сертификаты <span></span></p>
    </a>
    <button class="header_offer_close_wrapper" onclick="clicked()">
      <span class="header_offer_close">+</span>
    </button>
  </div>

И код javascript:

if (localStorage.getItem("vivsible") === "false") {
      const rec = document.querySelector(".header_offer_wrapper")
      rec.style.display = "none"
      const blocks = document.querySelectorAll(".header")
      for (let i = 0; i < blocks.length; i++) {
        blocks[i].classList.add("someclass")
      }
    }

    const clicked = () => {
      const rec = document.querySelector(".header_offer_wrapper")
      rec.style.display = "none"
      const blocks = document.querySelectorAll(".header")
      for (let i = 0; i < blocks.length; i++) {
        blocks[i].classList.add("someclass")
      }

      localStorage.setItem("vivsible", "false")
    }

Answer 1

[Олег Колесников]

В том виде как есть, должно работать.
Судя по ошибке, браузер функцию clicked() не видит...
Тут либо скрипт цепляете перед html... либо кэш браузера нужно отключить

Comments

[tuzovrr]

Вставить перед html помогло, спасибо, но он почему-то не запоминает значения и после перезагрузке блок снова показывается,но button почему-то пропал

[Олег Колесников]

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

if (localStorage.getItem("vivsible") === "false") {
      const rec = document.querySelector(".header_offer_wrapper")
      rec.style.display = "none"
      const blocks = document.querySelectorAll(".header")
      for (let i = 0; i < blocks.length; i++) {
        blocks[i].classList.add("someclass")
      }
    }

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

document.addEventListener("DOMContentLoaded", hideBlock);
function hideBlock() {
  if (localStorage.getItem("vivsible") === "false") {
    const rec = document.querySelector(".header_offer_wrapper");
    rec.style.display = "none";
    const blocks = document.querySelectorAll(".header");
    for (let i = 0; i < blocks.length; i++) {
      blocks[i].classList.add("someclass");
    }
  }
}