我正在尝试添加关闭功能

Question

I have created an email subscription form at site footer. But the problem is, when i click the close icon, the form do not disappears.

 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

You are matching the wrong thing with your query selector. You are trying to get an element with a "close" id but you have none in your code.

This could be arranged by adding id="close" to thr tag you want to trigger the click function you defined

Example :

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

Same is happening to the queryselector that matches the item you want to close... It doesn't exist and you will need to adjust it

You can change the id="toggle" around the page to see that those elements are the ones that get open and closed

Here is a snippet

 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

what element are you targeting with this?

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

Your code should be:

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

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

then:

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

Basically you need to fix your elements' names. Let me know if it works :)