不能使用 If - Else 元素存在于 Javascript

Question

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

Answer 1

You should set the tbl 's id to 'tbl' by tbl.id = 'tbl' .

Answer 2

You are doing the check on the id of the table but never assign one.

function makeGrid(x,y) {
  event.preventDefault();
  if (document.getElementById('tbl') != null) {
    return;
  } else {
    var body = document.getElementById('pixelCanvas');
    var tbl  = document.createElement('table');
    tbl.id = "tbl"; // Assign the id for the check
    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();
  }

};