Add OnClick Event to SPFX Html - No Framework

Question

I have an SPFX Web Part (No Framework) and would like to add an onClick event to my which will call my function swap().

Code:

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="swap()"></i>
    <iframe id="flip" class="${ styles.startCollapsed }" src="https://css-tricks.com/restart-css-animation/" frameborder="0"></iframe>
  </div>`;

  function swap(){
    console.log("Triggered!");
    document.getElementById("flip").className == "expanded" ? document.getElementById("flip").className = "collapsed": document.getElementById("flip").className = "expanded";
  }
}

Things I've tried:

When I add onClick="swap()" or onClick="${ this.swap() }" to my <i> tag, the webpart no longer renders in the workbench. (When using the this.swap() method I moved the function outside of the render function)

Adding document.getElementById("rArrow").addEventListener("Click", swap()) (with or without this.), there is an error that the EventListener doesn't accept 'void' types.

Answer 1

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..

Answer 2

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

Answer 3

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";
      }