title: Javascript Varialbe in querySelector returns null
body: <p>I'm having trouble getting a variable to work in a querySelector. I have a link like this:</p>
  <pre><code>&lt;a class=&quot;ast-linkto linkto-howitworks&quot;&gt;Click to Scroll&lt;/a&gt;
  </code></pre>
  <p>and further down the page a section like this:</p>
  <pre><code>
  &lt;section id=&quot;howitworks&quot;&gt;
  Content here.
  &lt;/section&gt;
  
  </code></pre>
  <p>This is the part of the function that's causing issues. The console.log works properly, it logs linkToTargetId as <code>#howitworks</code> in the console, so that's fine. But I can't do <code>document.querySelector(linkToTargetId)</code>, and if I try to wrap that variable in quotes in any manner of way, I get an error that it's not a valid selector. I know I'm missing something simple. <code>document.querySelector(&quot;#howitworks&quot;).innerHTML</code> <strong>does</strong> return the expected result, so it's not like #howitworks doesn't exist.</p>
  <pre><code>document.querySelectorAll('.ast-linkto').forEach(function(item) {
      var regx = new RegExp('\\b' + 'linkto-' + '[^ ]*[ ]?\\b', 'g');
      var linkToTargetClass = item.className.match(regx, '')[0];
      var linkToTargetId = '#' + linkToTargetClass.substring(linkToTargetClass.indexOf(&quot;-&quot;) + 1);
      console.log(linkToTargetId);
  
      /* Please let one of these work! */
      console.log(document.querySelector(linkToTargetId).innerHTML);
      console.log(document.querySelector(&quot;'&quot;+linkToTargetId+&quot;'&quot;).innerHTML);
  </code></pre>
  <p>Here's a snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelectorAll('.ast-linkto').forEach(function(item) {
    var regx = new RegExp('\\b' + 'linkto-' + '[^ ]*[ ]?\\b', 'g');
    var linkToTargetClass = item.className.match(regx, '')[0];
    var linkToTargetId = '#' + linkToTargetClass.substring(linkToTargetClass.indexOf("-") + 1);
    console.log(linkToTargetId);
  
    /* Please let one of these work! */
    console.log(document.querySelector(linkToTargetId).innerHTML);
    console.log(document.querySelector("'" + linkToTargetId + "'").innerHTML);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="ast-linkto linkto-howitworks"&gt;Click to Scroll&lt;/a&gt;
  
  &lt;section id="howitworks"&gt;
    Content here.
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>