Add OnClick Event to SPFX Html - No Framework

You need to add an event listener for triggering the function swap()

<i id="rArrow" class="fas fa-arrow-circle-right"></i> let clickEvent= document.getElementById('rArrow'); clickEvent.addEventListener("click", (e: Event) => this.swap()); 

Trigger the function like this out side of render (): void

swap(){ } 

Let me know if still trouble.

So your code structure will look like.

 public render () :void { this.innerHTML = ` <i id="rArrow" class="fas fa-arrow-circle-right" onClick="swap()"></i> `; let clickEvent= document.getElementsById('rArrow'); clickEvent.addEventListener("click", (e: Event) => this.swap()); } swap() { } 

Happy to help..

Here is code that should work for you:

import { SPComponentLoader } from '@microsoft/sp-loader'; public render(): void { SPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.9/css/all.css'); this.domElement.innerHTML = ` <div> <i id='btnTest' class="fas fa-arrow-circle-right"></i> </div>`; $(document).on('click', '#btnTest', function (e) { alert("Btn Clicked!!!"); }); } 

Regards,
Chandani Prajapati

as your code is getting transpiled from typescript to JS/HTML/CSS names will change in the process. Here is some updated code that should work:

export default class ExpandableIFrameWebPart extends BaseClientSideWebPart<IExpandableIFrameWebPartProps> { public render(): void { if (!this.renderedOnce){ SPComponentLoader.loadCss('https://use.fontawesome.com/releases/v5.0.9/css/all.css'); } this.domElement.innerHTML = ` <div class="${ styles.expandableIFrame }"> <i id="rArrow" class="fas fa-arrow-circle-right" onClick="${this.swap}"></i> <iframe id="flip" class="${ styles.startCollapsed }" src="https://css-tricks.com/restart-css-animation/" frameborder="0"></iframe> </div>`; } public swap(): void { console.log("Triggered!"); document.getElementById("flip").className == "expanded" ? document.getElementById("flip").className = "collapsed": document.getElementById("flip").className = "expanded"; }