I have SPFX no framework web part in SharePoint 2019. I am having trouble automatically calling a function when the radio/checkbox button is clicked within the form.

Here is a radio button within the render() method:

public render(): void {
this.domElement.innerHTML = `
<div class="${styles.orderform}">
<div class="${styles.container}">
<div class="${styles.row}">
<div class="${styles.column}">
<span class="${styles.title}"></span>
<div id="row">
<div  class="col-50 idSubscriptionption">
  <input type="radio" value="Subscription" id="idSubscriptionption" onchange="handleClick() name="group1">
  <label id="Subscription"></label><br>

The eventhandler nor the function does not receive any onchange trigger

 private setButtonsEventHandlers(): void { 
    const webPart: OrderformWebPart = this; 
    this.domElement.querySelector('button.create-Button').addEventListener('click', () => { webPart.SaveItem(); });     
    this.domElement.querySelector('idSubscriptionption').addEventListener('click', () => { handleClick(); });           

function handleClick() {
let elsub = <HTMLInputElement>document.getElementById('idSubscriptionption');
 document.getElementById('Subscription')[value]='Subscription chosen'   
 alert('Subscription selected');
document.getElementById('Subscription')[value]='No Subscription'

1 Answer 1


I can see that there are some semantic errors in your code. Try using below:

this.domElement.querySelector('input#idSubscriptionption').addEventListener('click', () => { handleClick(); });


<input type="radio" value="Subscription" id="idSubscriptionption" onchange="handleClick()" name="group1">

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.