show text at button click in power bi using typescript - Custom Script

I did.

This code just keeps appending text to the visual each time the button is clicked.

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

import * as d3 from "d3";

import { VisualSettings } from "./settings";

export class Visual implements IVisual {
    private root: d3.Selection<HTMLElement, {}, HTMLElement, any>;
    private button: d3.Selection<HTMLInputElement, {}, HTMLElement, any>;
    private settings: VisualSettings = new VisualSettings;

    constructor(options: VisualConstructorOptions) {
        this.root = d3.select(options.element);

        // Add Button Element
        this.button = this.root.append("input")
            .attr("type", "button")
            .attr("name", "mybutton")
            .attr("value", "Click Me")
            .on("click", this.clickedButton);

    }

    public update(options: VisualUpdateOptions) {
        
    }

    // Event handler for button click
    private clickedButton = () => {
        this.root.append("div")
            .text("Hello World!");
    }

}