title: Place charters in a grid when pressing a certain character
body: <p>I'm trying to make a grid game which will allow the user to move around a grid and collect items. I've only made the grid, being able to fill in the grid when clicking a square and a few buttons.</p>
  
  <p>I'm trying to implement that if a user clicks on a certain tile and then presses a certain character key, then that character will appear in the tile.</p>
  
  <p>I've already made a switch case to alert a user if they input a certain tile but I don't know how to implement it so it will input the character key in the tile. </p>
  
  <p>You may need to download this image for the grid to show but the error still demonstrates itself without it. 
  <img src="https://i.imgur.com/5o1U7rv.png" alt=""></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 s ={
           rows: 10,
           cols: 10,
           width: 40,
           height: 40,
  
  
           };
  
           document.onkeydown = function(e) {
      switch (e.keyCode) {
          case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57:
              alert('number');
              break;
          case 75:
              alert('k');
              break;
          case 79:
              alert('o');
              break;
          case 85:
              alert('u');
              break;
          case 65:
              alert('a');
              break;
          case 68:
              alert('d');
              break;
          case 87:
              alert('w');
              break;
          case 88:
              alert('x');
              break;
      }
  };
  
  
           var c;
  
  
           window.onload = function(){
           var canvas = document.getElementById("gCanvas");
           c = canvas.getContext("2d");
  
           init();
           } 
  
  
  
  
           var mX;
           var mY;
           var clickedX;
           var clickedY;
  
           window.onclick = function(e){
  
  
  
           c.strokeStyle = "black";
  
  
  
           c.fillRect(Math.floor(e.offsetX/40)*40, 
                              Math.floor(e.offsetY/40)*40,
                              40, 40);
  
           mX = e.pageX;
           mY = e.pageY;
  
           if(Math.floor(mX/s.width) &lt; s.cols &amp;&amp; Math.floor(mY/s.height) &lt; s.rows){
           clickedX = Math.floor(mX/s.width);
           clickedY = Math.floor(mY/s.height);
  
           console.log(clickedX + "," + clickedY);
  
  
           }
  
           }
  
  
  
  
  
  
  
  
  
           var box;
  
           box = new Image();
           box.src = "box.png";
  
  
           function init(){
  
  
           drawCanvas();
  
           }
  
           function drawCanvas(){
  
           c.clearRect(0,0,400,400);
  
           for(var i=0; i&lt;s.rows; i++){
           for(var n=0; n&lt;s.cols; n++){
           var x = n*s.width;
           var y = i*s.height;
           c.drawImage(box, x, y);
           }
           }
           }
  
           function myFunction() {
               document.getElementById("demo").innerHTML = "game started";
      event.stopPropagation();
           }
  
           function test() {
               alert('game ended');
      event.stopPropagation();
           }
  
  
   function refreshGame() {
               alert('game refresh');
      event.stopPropagation();
           }
  
    
  
  function refresh() {
  
  alert('game refresh');
  
      setTimeout(function () {
          location.reload()
      }, 100);
   event.stopPropagation();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: lightblue;
  }
  
  h1 {
      color: navy;
      margin-left: 20px;
  }
  
  .active{
      background:#357EBD;
      color:#FFF
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;body&gt;
        &lt;h1&gt;grid game&lt;/h1&gt;
  
  
     &lt;/body&gt;
     
        
        &lt;style&gt;
           body{
           margin:0;
           }
           h1 {
           text-align: center;
           }
        &lt;/style&gt;
        
        
   
     &lt;body&gt;
        &lt;div id = "controls"&gt;
        &lt;/div&gt;
        &lt;div id ="gameCanvas"&gt;
           &lt;canvas id ="gCanvas" width="400" height="400"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
        &lt;body&gt;
  
           &lt;button class="button" onclick="myFunction()"&gt;Start game&lt;/button&gt;
           &lt;p id="demo"&gt;&lt;/p&gt;
           
     
     &lt;input type="submit" value="Refresh game" data-wrapper-class="custom-btn" data-corners="false" id="submit" onclick="refresh()"&gt;
  
           &lt;button class="button" onclick="test()"&gt;end game&lt;/button&gt;
     &lt;/body&gt;
     &lt;/body&gt;
  
  
  
  
  
        
        
        
        
        
        </code></pre>
  </div>
  </div>
  </p>