title: Add Event listener is not working in js inside wordpress theme environement
body: <p>I am trying to add <code>addEventListener</code> in one of the <code>span</code> tag inside my header.php file but its not working I don't know why. I tried several times. I am working on wordpress theme. I am successfully imported the file. when i put <code>alert('helllo word)</code> outside addEvent listener it works but inside the addEvent listener nothing is working. Please help.</p>
  <p>This is my code
  header.php</p>
  <pre><code> &lt;div class=&quot;header__menu&quot;&gt;
      
  &lt;span class=&quot;header__menu_btn&quot;&gt;
  &lt;svg class=&quot;header__menu_icon&quot; width=&quot;3em&quot; height=&quot;3em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-filter-left&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z&quot;/&gt;
  &lt;/svg&gt;
  &lt;/span&gt;
  &lt;!-- &lt;svg width=&quot;3em&quot; height=&quot;3em&quot; viewBox=&quot;0 0 16 16&quot; class=&quot;bi bi-x&quot; fill=&quot;currentColor&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z&quot;/&gt;
  &lt;/svg&gt; --&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div class=&quot;header__sidenav&quot;&gt;
      &lt;div class=&quot;header__sidenav_content&quot;&gt;
          &lt;h1 &gt;Hello From Drawer&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <blockquote>
  <p>header.js</p>
  </blockquote>
  <pre><code>const headerMenuIcon = document.getElementsByClassName(&quot;header__menu_btn&quot;);
  const headerSideBar = document.querySelector(&quot;header__sidenav&quot;);
  
  headerMenuIcon.addEventListener(&quot;click&quot;, function () {
    headerSideBar.style.width = &quot;100%&quot;;
    alert(&quot;Hello world&quot;);
  });
  </code></pre>