Accessing Global Variables from inside document.getElementById

Suppose I use document.getElementById inside my .ts file like this :

   export class HomePage {
         someVariable : any;
         
         constructor(){

         }
         
         ionViewDidLoad(){
               document.getElementById("content").addEventListener("click", function( event ) {
  	            
               this.someVariable = somethingElse;      // want to change the value of that global 
               variable
               
     
               }, false);
         }
   }

If I try to do this, it says property someVariable does not exist on type HTML element, so ‘this’ isn’t referring to the global variable I want it to. If I try HomePage.someVariable to access it, that also doesn’t work. How can I change the value of the global variable from inside the document.getElementById handler ?

Everything about this is wrong. Please read the Angular documentation.

Don’t abuse any like this.
Don’t directly access the DOM; use Angular’s event binding syntax instead
Never type “function” inside of one; always use arrows and lambdas

Should I use ElementRef or ViewChild instead ?

No. As I said earlier, you should use an output property binding. Seriously, do nothing further until you have gone through the fundamental Angular documentation.