SPFX radio button click to update label value

Question

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>
</div>

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');
if(elsub.checked)
{
 document.getElementById('Subscription')[value]='Subscription chosen'   
 alert('Subscription selected');
}
else
{
document.getElementById('Subscription')[value]='No Subscription'
}
}

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(); });

AND

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