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 working on implementing two buttons to scroll up/down accordingly. Right now they're working, but I can only scroll one screen down and then one screen up, some of my pages are longer than 1 page so obviously I want to be able to press it again and scroll further down.

The problem I'm having seems very trivial but it's defying everything I'm used to. You can see in the image I'm trying to create a variable and then use it in the function to increment my height based on how many times the button has been pressed. For some reason it won't let me use my 'height' variable inside the function. I've tried initializing my 'height' above the constructor and I get a different error. "Property 'height' does not exist on type 'HTMLElement'.ts(2339)" I feel like I'm missing something very obvious. Thanks for any help you can provide.

TLDR: Can't use local variable inside function.

CodePudding user response：

There are multiple wrong things with your code. You're declaring the height variable inside of the constructor. Therefore it won't be available outside the scope. You should declare height as a property of your class so you can access it inside of your component. Also, you're passing this as an argument of the class methods. Don't use reserved keywords as arguments. You also access the DOM directly (document.querySelector()) which in Angular is a bad practice for several reasons. You need to use the abstraction that angular provides instead.

Angular is a very powerful framework but it requires good knowledge of JavaScript. I suggest that you first improve your JS knowledge before working with TS and Angular.

CodePudding user response：

Use this instead of let by the variable declaration in the constructor and add a class-variable outside of the constructor.

So you declare the variable outside as class-variable (so you can also access to the variable from the HTML-file), and in the constructor you initialise the variable as shown in the code snipped below

export class PortfolioComponent implements OnInit {

  public height: any;

  constructor() {
      this.height = windows.innerHeight;
  }
}