HTMLElement is suddenly undefined

Question

In the ngOnInit() mehtod, I'm getting an HTMLElement and using it to set a variable:

ngOnInit(){
this.popUpContainerDisplay = document.getElementById('popUpContainer');
console.log("pop", this.popUpContainerDisplay);
this.popUpAcceptContainerDisplay = document.getElementById('acceptPopUp');
this.popUpDeclineContainerDisplay = document.getElementById('declinePopUp');
this.popUpWarningContainerDisplay = document.getElementById('warningPopUp');
}


popUpFadeOut(): void{
if(this.popUpContainerDisplay.style.opacity == "0"){
console.log("fine", this.popUpContainerDisplay);
this.popUpContainerDisplay.style.opacity = "1";
this.popUpContainerDisplay.style.display = "block";

setTimeout(this.fade, 1000); //popup box fades away after 1 seconds
}
}

fade(): void {
console.log("notFine", this.popUpContainerDisplay);
this.newOpacity = parseInt(this.popUpContainerDisplay.style.opacity) - .01;
this.popUpContainerDisplay.style.opacity = String(this.newOpacity);

if (this.newOpacity <= 0)
{
this.popUpContainerDisplay.style.display = "none";
this.popUpContainerDisplay.style.opacity = "0";
}
else
{
requestAnimationFrame(this.fade);
}
}

constructor(private biddingService: BiddingService) {


biddingService.bids.subscribe(bid => {

if(bid.bidderArray){
this.bidderArray = bid.bidderArray; //.join('');
this.highestBid = bid.bid;

this.popUpContainerDisplay.style.display = bid.popUpContainerDisplay;
this.popUpContainerDisplay.style.opacity = bid.popUpContainerOpacity;  

this.popUpAcceptContainerDisplay = bid.popUpAcceptContainerDisplay;
this.popUpDeclineContainerDisplay = bid.popUpDeclineContainerDisplay;
this.popUpWarningContainerDisplay = bid.popUpWarningContainerDisplay;
this.arrayReset = bid.resetArrayBoolean;
this.popUpFadeOut();
}


});
}

ngOnInit() and popUpFadeOut() log the element in the console, but fade() logs 'undefined'. Why is the element suddenly undefined?

would be more pleasant to read if you sort out the indentation — Sam Redway, Dec 22 '16 at 20:15

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

You can use arrow function to make sure that you context this inside of fade method will be instance of your component:

setTimeout(() => this.fade(), 1000);

or

fade = () => {
  console.log("notFine", this.popUpContainerDisplay);
  this.newOpacity = parseInt(this.popUpContainerDisplay.style.opacity) - .01;

See also other options here:

Angular2 injected Router is undefined

edited May 23 '17 at 12:32

Community

1
1

answered Dec 22 '16 at 19:47

yurzui

205,937
32
433
399

Now the HTMLElement is not undefined anymore, but it says it "Cannot read property 'popUpContainerDisplay' of undefined" at console.log("notFine", this.popUpContainerDisplay); inside the fade() method. – Jesper Dec 22 '16 at 19:57
What about `fade = () => {`? – yurzui Dec 22 '16 at 20:01
Am I doing this right? https://gyazo.com/66c28e05b0888a76f79f6f196db226d1 – Jesper Dec 22 '16 at 20:08
No. I've added it to my answer – yurzui Dec 22 '16 at 20:09
So like this? https://gyazo.com/354b12c58b43328461a0ebd03d280efd It's giving me this error: (SystemJS) Unexpected strict mode reserved word(…) – Jesper Dec 22 '16 at 20:15
No. `fade` method should stay in at the same place – yurzui Dec 22 '16 at 20:22
I think that did it, thanks! Can you explain why fade = () => { } worked and fade(): void { } did not? :) – Jesper Dec 22 '16 at 20:26
Check this https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this and http://stackoverflow.com/questions/2130241/pass-correct-this-context-to-settimeout-callback – yurzui Dec 22 '16 at 20:28

HTMLElement is suddenly undefined

1 Answers1