title: How to execute a function for when a button is clicked in an array?
body: <p>I have a very large array of 256 buttons laid out on a graph (for the example it will just be 5). I've already made a forEach statement with an event listener in it but it isn't doing what I want it to do. I want the button I click to turn black plain and simple, but I've tried setting up a console.log to test out my function and for each time I click one button it logs 256 times. I want the button to do an action for only the button I clicked in the array. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let cells = document.querySelectorAll(".grid");
  
  cells.forEach(() =&gt; {
      addEventListener("click", function(){
          target.style.backgroundColor = "black";
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin:0;
  }
  
  #background {
      position:absolute;
      height:800px;
      width:800px;
      background-color:grey;
      top:100px;
      left:550px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  }
  
  .grid {
      display:block;
      height:50px;
      width:50px;
  }
  
  .grid:hover {
      background-color:lightgrey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;FindMyKeys&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="background"&gt;
              &lt;div id="grid1" class="grid"&gt;&lt;/div&gt;
              &lt;div id="grid2" class="grid"&gt;&lt;/div&gt;
              &lt;div id="grid3" class="grid"&gt;&lt;/div&gt;
              &lt;div id="grid4" class="grid"&gt;&lt;/div&gt;
              &lt;div id="grid5" class="grid"&gt;&lt;/div&gt;
                  &lt;/div&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>