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.