title: JavaScript can't select DOM element by ID in WordPress
body: <p>Is there a way for JavaScript to interact with the DOM on a WordPress page. Or is interaction only possible through jQuery?</p>
  <p>Button element in <code>header.php</code>:</p>
  <pre class="lang-php prettyprint-override"><code>&lt;div id=&quot;settings&quot; class=&quot;special-menu__item btn-settings&quot;&gt;
              &lt;button class=&quot;special-menu__title&quot;&gt;
                &lt;i style=&quot;margin-right: 10px&quot; class=&quot;fa fa-cog&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
          Настройки
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript Code:</p>
  <pre class="lang-js prettyprint-override"><code>const settingButton = document.getElementById(&quot;settings&quot;);
  let toggle = false;
  settingButton.addEventListener(&quot;click&quot;, function _f() {
    if (toggle === false) {
      settingButton.classList.add(&quot;active&quot;);
      settingOpen.classList.add(&quot;open&quot;);
    } else {
      settingButton.classList.remove(&quot;active&quot;);
      settingOpen.classList.remove(&quot;open&quot;);
    }
    toggle = !toggle;
    removeEventListener(&quot;click&quot;, _f);
  });
  </code></pre>