title: Adding 'mousedown' event listener in a grid which will trigger all cells unless 'mouseup' event occurs
body: <p>I was still working on my Graph Visualizer project and I am unable to figure out how to add <code>mousedown</code> event listener to all the cells. I am trying to draw a wall-like structure. Let me explain when <code>mousedown</code> event occurs that cell will become a wall (I'll add some color) and unless the <code>mouseup</code> event occurs all the cells through where the cursor will pass will also become a wall. I am facing two issues here: I was able to add an event listener to each cell but I am unable to identify which cell was it. Also, I would like to know how to create continuous walls upon <code>mousedown</code>.</p>
  
  <p>Any suggestions or advice is highly appreciated.</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>var gridCols = 60;
  var gridRows = Math.floor(screen.height / 25) - 2;
  gridContainer.style.left = (screen.width-25*gridCols)/screen.width * 50+"%";
  var matrix = [];
  var found = false;
  
  
  function sleep(ms) 
  {
   return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }
  
  function getCell(row, col)
  {
   return document.querySelector(".row:nth-child("+(row+1)+") .gridsquare:nth-child("+(col+1)+")");
  }
  
  for(var i=0; i&lt;20; i++) 
  {
      matrix[i] = [];
      for(var j=0; j&lt;60; j++) 
          matrix[i][j] = false;
  }
  
  function addWall()
  {
   console.log('called');
  }
  
  function genDivs(rows, cols)
  { 
   var e = document.getElementById("gridContainer");
   for(var r = 0; r &lt; rows; r++)
   { 
    var row = document.createElement("div"); 
    row.className = "row";
    for(var c = 0; c &lt; cols; c++)
    { 
     var cell = document.createElement("div"); 
     if(r == 10 &amp;&amp; c == 20)
      cell.className = "gridsquare begin";
     else if(r == 10 &amp;&amp; c == 40)
      cell.className = "gridsquare end";
        else
         cell.className = "gridsquare"; 
        row.appendChild(cell); 
        row.addEventListener("mousedown", addWall)
    } 
    e.appendChild(row); 
   }
  }
  
  async function dfs(i, j)
  {
   if(found || i &gt;= 20 || j &gt;= 60 || i &lt; 0 || j &lt; 0 || matrix[i][j])
    return;
   if(i == 10 &amp;&amp; j == 40)
   {
    found = true;
    return;
   }
   matrix[i][j] = true;
   getCell(i, j).style.background = "magenta";
   await sleep(5);
   await dfs(i+1, j);
   await dfs(i, j+1);
   await dfs(i-1, j);
   await dfs(i, j-1);
  }
  
  genDivs(20, gridCols);
  //dfs(10, 10);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;style&gt;
    #gridContainer
    {
     outline: 1px solid rgb(175, 216, 248);
     font-size: 0;
     position: absolute;
    }
    .row
    {
     
    }
    .gridsquare
    {
     width: 25px;
     height: 25px;
     box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
     display: inline-block;
    }
    .begin
    {
     background-color: purple;
    }
    .end
    {
     background-color: magenta;
    }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="gridContainer"&gt;&lt;/div&gt;
   &lt;script type="text/javascript" src="HomeScript.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>