Я пытаюсь добавить функцию закрытия

Question

Я создал форму подписки по электронной почте в нижней части сайта.Но проблема в том, что когда я нажимаю на значок закрытия, форма не исчезает.

var button = document.querySelector("#close");
button.addEventListener("click", function() {
  var t = document.querySelector(div.getAttribute("data-target"));
  t.style.display = "none" == t.style.display ? "block" : "none"
});

<div class="hook-section js-common-hook">
  <div class="hook-content small-hook-show">
    <div class="loader">
      Loading...
    </div>
    <div class="hook-close-btn sprite-img">Close</div>
    <div class="top-sec clearfix">
      <div class="left-sec sprite-img">
      </div>
      <div class="right-sec">
        <h5>Email Newsletter</h5>
        <p>The best of technology updates from India and around the world</p>
      </div>
    </div>
    <div class="bootom-sec">
      <form class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
    (&apos;https://feedburner.google.com/fb/a/mailverify?uri=12c55&apos;,
     &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input placeholder="Enter your email id" name="email" type="text" />
        <input value="12c55" name="uri" type="hidden" />
        <input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
      </form>
    </div>
  </div>
</div>

Answer 1

Вы неверно сопоставляете свой селектор запросов.Вы пытаетесь получить элемент с идентификатором «close», но у вас его нет в коде.

Это можно сделать, добавив id="close" к тегу thr, который вы хотите вызвать функцию щелчка, которую вы определили

Пример:

<div id="close" class="hook-close-btn sprite-img">Close</div>

То же самое происходит с выборщиком запросов, который соответствует элементу, который вы хотите закрыть ... Он не существует, и вам нужно будет его настроить

Вы можете изменить id="toggle" вокруг страницы, чтобы увидеть, что эти элементы открываются и закрываются

Вот фрагмент

var toggler = document.querySelector("#close");
toggler.addEventListener("click", function() {
  var toggleElement = document.querySelector("#toggle");
  if (!toggleElement.style.display || toggleElement.style.display === "block") {
    toggleElement.style.display = "none";
  } else {
    toggleElement.style.display = "block";
  }
});

<div class="hook-section js-common-hook">
  <div class="hook-content small-hook-show">
    <button id="close" class="hook-close-btn sprite-img">Close</button>
    <div class="top-sec clearfix">
      <div class="left-sec sprite-img">
      </div>
      <div class="right-sec">
        <h5>Email Newsletter</h5>
        <p>The best of technology updates from India and around the world</p>
      </div>
    </div>
    <div class="bootom-sec">
      <form id="toggle" class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
    (&apos;https://feedburner.google.com/fb/a/mailverify?uri=12c55&apos;,
     &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input placeholder="Enter your email id" name="email" type="text" />
        <input value="12c55" name="uri" type="hidden" />
        <input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
      </form>
    </div>
  </div>
</div>

Answer 2

на какой элемент вы нацеливаетесь с этим?

var t = document.querySelector(div.getAttribute("data-target"));

Ваш код должен быть:

<div id="popup" class="hook-section js-common-hook">    //your box

<div id="close" class="hook-close-btn sprite-img">Close</div>      // your button

тогда:

var button = document.querySelector("#close");
button.addEventListener("click", function() {
  var t = document.querySelector("#popup"));
  t.style.display = "none";
});

В основном вам нужно исправить имена ваших элементов. Дайте мне знать, если это работает:)