title: How do I make the querySelector look in a specific included document only?
body: <p>On my index page I have a number of includes.</p>
  <pre><code>&lt;section&gt;&lt;?php include('content/content1.php') ?&gt;&lt;/section&gt;
  &lt;section&gt;&lt;?php include('content/content2.php') ?&gt;&lt;/section&gt;
  &lt;section&gt;&lt;?php include('content/content3.php') ?&gt;&lt;/section&gt;
  </code></pre>
  <p>In each of them I have a unique script (and some other things which is not shown here).</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;          
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Content1&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;content/sketch.css&quot;&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class=&quot;frame&quot;&gt;
       &lt;canvas&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  
  &lt;script src=&quot;content/content1.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>The <code>&lt;canvas&gt;</code> tag is what the querySelector in the javascript calls to.</p>
  <pre><code>var canvas = document.querySelector('canvas');
  </code></pre>
  <p>This works, but only for the first content file. It seems the querySelector looks at the whole loaded page, instead of just inside the body of the document where the script is placed. Google console says: &quot;Indentifier 'canvas' has already been declared&quot;.</p>
  <p>I have tried setting an id on the canvas-element:</p>
  <pre><code>&lt;canvas id=&quot;canvas1&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <pre><code>var canvas = document.querySelector('#canvas1');
  </code></pre>
  <p>But it's not working. How do I get around this?</p>