I am developing VS code extension. For that, I used WebView to show user interface and perform some task in it. So that I used svelte to customize my WebView panel.

My problem is, I created svelte file that contain Styles,JS,HTML. So when I call onclick method inside the tag, it won't work but when it is place out of the tag it is work. WHY IS THAT HAPPEN? how can I solve this?

<h1 style="text-align:center" on:click={microphoneOnAndOff}>Click Me</h1> **--// This work**

<div class="box">
    <div class="object">
           <div class="outline" style="display: none;"></div>
           <div class="outline" id="delayed" style="display: none;"></div>
           <div class="buttonStyle"></div>
           <div class="buttonStyle" id="circlein">
           <svg  on:click={microphoneOnAndOff} class=""></svg> **--// This Not work**
           </div>
    </div>
</div> 

Anyone can help me to solve this problem?