title: Selecting ID based on substring
body: <p>I have a group of images in my <code>HTML</code> with the ID's <code>"Hole#" ex: "Hole1", "Hole2" ... "HoleN".</code> These IMG tags are loading a locally stored image. My goal is to print an <code>alert</code> when one of the images is clicked.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/42128516/what-is-the-different-between-att-val-and-att-val-in-css#42128908">another</a> StackOverflow question that I thought would answer my question. I've incorporated it into my code below. Unfortunately it did not achieve the desired effect.</p>
  
  <pre><code>//Dynamically creates images
  for (let i = 1; i &lt;= NUM_HOLES; i++) {
      let HoleID = `"hole${i}"`;
      let HoleIDPic = `"holePic${i}"`;
      holesString +=
      `&lt;div id=`+ HoleID + `&gt;
      &lt;img id=` + HoleIDPic + ` src="" /&gt;
      &lt;/div&gt;`
  }
  
  window.onload = function() {
        document.getElementById("img[id|=hole]").onclick = function()
        {
           alert("Clicked");
        };
     };
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;section id="holes"&gt;
  
     &lt;/section&gt;
  </code></pre>
  
  <p>replacing the code <code>"img[id|=hole]"</code> with <code>"hole1"</code> does work however (for hole1), So I've concluded its my syntax the <code>ID</code> selection.</p>