```html
<!DOCTYPE html>
<html>
  <head>
    <meta lan="en-us" charset="UTF-8">
  </head>
  <body>

    <p>Counting with a local variable.</p>

    <p id="demo"></p>
    <button type="button" onclick="myFunction('+')">Count +</button>
    <button type="button" onclick="myFunction('-')">Count -</button>

    <script>
      document.getElementById("demo").innerHTML = 0;
      function add(number){
        var counter = 0;
        return function() {return counter += number;} 
      }
      function sub(number){
        var counter = 0;
        return function() {return counter -= number;} 
      }

      var counterIncr = add(1);
      var counterDicr = sub(1);

      function myFunction(s){
        if( s == "+"){
          /*this.*/counter1 = counterIncr();
        }
        else if (s == "-"){
          /*this.*/counter2 = counterDicr();
        }

        if(!counter2 && counter1){
          document.getElementById("demo").innerHTML = counter1;
        }
        else if(!counter1 && counter2){
          document.getElementById("demo").innerHTML = counter2;
        }
        else if(counter1 && counter2){
          document.getElementById("demo").innerHTML = (counter1 + counter2);
        }
      }
    </script>

  </body>
</html>
```

During my study on JS closures I've extended a W3C example, implementing an HTML page with two buttons. The example has just one button. The first button increases a counter on-click and the second button decreases that counter. A function "myFunction" is defined that uses two variables "counter1" and counter2" in order to do the job. These variables were declared as this.counter1 and this.counter2 and this page's implementation works as it's expected.
My question:
When I omit "this" from counter1 and counter2 declaration (...just for fun) my page still works (surely not in strict mode) but only when both buttons have been clicked once. How this behavior could be explained or how does JS engine manipulates (treats) undeclared variables under the hood?