title: my if/else statement work properly at first and then not
body: <p>I have a problem with my if/else statement. it's running properly at first but when I'm changing the size of the table it's taking both conditions.<br>
  Would someone please help me fix this problem?</p>
  
  <pre><code>function makeGrid(event) {
    event.preventDefault();
    theTable.innerHTML = "";
    var row = document.querySelector("#inputHeight").value;
    var column = document.querySelector("#inputWidth").value;
    for (var i = 0; i &lt; row; i++) {
      width = document.createElement("tr");
      for (var j = 0; j &lt; column; j++) {
        height = document.createElement("td");
        width.appendChild(height);
      }
      theTable.appendChild(width);
    }
    theTable.addEventListener("click", evt =&gt; {
      colorValue = document.querySelector("#colorPicker").value;
      if (evt.target.style.backgroundColor) {
        evt.target.style.cssText = "bagckground-color: none";
        console.log("i was deleted");
      } else {
        evt.target.style.backgroundColor = colorValue;
        console.log("I was clicked");
      }
    });
  }
  </code></pre>