How to keep current HtmlElement active and change its properties? I have a simple class that listens click and draws two points on the page.
If first point is not exist it is drawn. When second point is present it should be changed after each click.
I dislike this part of code:
this.point2.element.style.left = `${e.x}px`;
this.point2.element.style.top = `${e.y}px`;

Full code:
export class Kizda {
    private point1: { element: HTMLElement; pointMeter: Point };
    private point2: { element: HTMLElement; pointMeter: Point };

    getPoints() {
        return { point1: this.point1, point2: this.point2 };
    }

    action(e: MouseEvent): void {
        const point = this.getMouseMPoint(e);

        function createPoint(color: string): HTMLElement {
            let pointSize = 12;
            let pointElement = document.createElement('div');
            pointElement.style.position = 'absolute';
            pointElement.style.width = `${pointSize}px`;
            pointElement.style.height = `${pointSize}px`;
            pointElement.style.left = `${e.x}px`;
            pointElement.style.top = `${e.y}px`;
            pointElement.style.background = color;
            pointElement.style.borderRadius = '50%';

            document.body.append(pointElement);

            return pointElement;
        }

        if (!this.point1) {
            this.point1 = { pointMeter: point, element: createPoint('red') };
            return;
        }

        if (!this.point2) {
            this.point2 = { pointMeter: point, element: createPoint('green') };
            return;

        } else {
            this.point2.element.style.left = `${e.x}px`;
            this.point2.element.style.top = `${e.y}px`;
        }
    }
There are some repetitions in the current implementation, which can be refactored and the code will become clearer. For example:

Use a custom type or interface for the private members.

interface MyPoint { // of course, choose a better name than MyPoint, which matches your context!
  element: HTMLElement; 
  pointMeter: Point;
}

export class Kizda {
  private point1: MyPoint;
  private point2: MyPoint;

  ...
}


The createPoint function produces only a part of the point object, but it can indeed produce instances of MyPoint. And it does not need to be nested inside the action function:

private createPoint(e: MouseEvent, color: string): MyPoint {
  const size = '12px';
  const element = document.createElement('div');
  const style = element.style;

  style.position = 'absolute';
  style.width = size;
  style.height = size;
  style.background = color;
  style.borderRadius = '50%';

  this.setCoordinates(element, e);

  document.body.append(element);

  const pointMeter = this.getMouseMPoint(e);
  return { element, pointMeter };
}

private setCoordinates(point: HTMLElement, e: MouseEvent): void {
  const style = point.style;
  style.left = `${e.x}px`;
  style.top = `${e.y}px`;
}


Finally, adjust the implementation of the action method by reusing the refactored items:

public action(e: MouseEvent): void {
  if (!this.point1) {
    this.point1 = this.createPoint(e, 'red');
  }
  else if (!this.point2) {
    this.point2 = this.createPoint(e, 'green');
  }
  else {
    this.setCoordinates(this.point2.element, e);
  }
}