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.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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