can't use If - Else element exists in Javascript

I wrote a JS function to create a table in html and JS I want to click submit and after that the table to be created but I dont want the Submit button to create another table if clicked again I tried to use IF - Else statements in the function but It's not working

code:

Button:

 document.getElementById("btn_submit").addEventListener("click",sizeGrid)

function

 function makeGrid(x,y) {
    event.preventDefault();
    if (document.getElementById('tbl') != null)
      {
        return;
      }
      else
      {
        var body = document.getElementById('pixelCanvas');
        var tbl  = document.createElement('table');
        for(var i = 0; i < x; i++){
           var tr = tbl.insertRow();
            for(var j = 0; j<y; j++){
              var td= tr.insertCell()
           }

        }

         body.append(tbl);
         paint()
      }

      }

HTML

    <h2>Design Canvas</h2>
<table  id="pixelCanvas">
</table>

The table gets created two times after I click submit two times