0

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.

3 Answers 3

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

1

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

enter image description here

Regards,
Chandani Prajapati

1
  • How do I call a custom method since this is an element clicked? Oct 25, 2021 at 20:38
0

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";
      }
1
  • This did stop the errors/ "build Failed" messages, but the onClick is not triggering :/
    – vanblart
    Jun 6, 2018 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.