import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-portfolio',
templateUrl: './portfolio.component.html',
styleUrls: ['./portfolio.component.css']
})
export class PortfolioComponent implements OnInit {
height = window.innerHeight;
windowHeight: any;
constructor() {
}
ngOnInit(): void {
const button = document.getElementById("btn");
button?.addEventListener("click", this.listenerFunction);
const button2 = document.getElementById("btn2");
button2?.addEventListener("click", this.listenerFunctionButton);
}
listenerFunction(this: HTMLElement, ev: Event) {
ev.preventDefault();
console.log("clicked");
window.scrollTo({top:height, behavior:'smooth'})
this.height+= 100;
}
listenerFunctionButton(this: HTMLElement, ev: Event) {
const height = window.innerHeight;
ev.preventDefault();
console.log("clicked");
window.scrollTo({top:-height, behavior:'smooth'})
}
}
I'm currently developing a functionality that involves scrolling up and down on my website using two buttons. While the current setup allows for one page scroll up and one page scroll down, I need to make it possible for users to scroll further with each button press. The issue lies in trying to access a variable within a function which is proving to be more challenging than expected.
The specific problem is related to how I can't use my 'height' variable inside the function without encountering errors. Despite trying different approaches like initializing 'height' above the constructor, the error message persists: "Property 'height' does not exist on type 'HTMLElement'.ts(2339)". It seems like I'm overlooking a simple solution to this issue. Any assistance would be greatly appreciated.
TLDR: Struggling to utilize local variable in a function.