I defined an element triggered on certain website and I attached onclick attribute to input elements created in this element. Now I'm trying to trigger the function by choosing either option but instead I'm getting error saying: "Uncaught ReferenceError: choosenFollowUp is not defined at HTMLInputElement.onclick"
Here is my code:
const choosenFollowUp = () => {
console.log('choosenFollowUp triggered');
let radios = document.getElementsByName('radioOption');
for(let i=0; i<radios.length; i++){
if(radios[i].checked){
console.log(radios[i].value);
}
}
}
let radio = document.createElement('div');
radio.style.width = '200px';
radio.style.height = '65px';
radio.style.backgroundColor = '#dddfe0';
radio.style.border = '1px solid black';
radio.style.borderTop = 'none';
radio.style.borderBottomLeftRadius = '10px';
radio.style.borderBottomRightRadius = '10px';
radio.style.position = 'absolute';
radio.style.top = '0px';
radio.style.right = '250px';
radio.innerHTML = `
<p style="color: black; text-align: center; background-color: #FFA500; color: white; font-weight: 700;">Follow-Up Options</p>
<div class="choosenOption" style="margin-left: 35px">
<input type="radio" name="radioOption" value="30"> 30 min</input>
<input type="radio" name="radioOption" value="60" checked="checked"> 60 min</input>
</div>
`
const radioTrigger = () => {
if(window.location.href === 'https://websiteAddress.com'){
const radioParent = document.querySelector("#main-page-content");
radioParent.appendChild(radio);
const radioOption = document.getElementsByName('radioOption');
for(let i=0; i<radioOption.length; i++){
radioOption[i].setAttribute('onclick', "choosenFollowUp()");
}
}
}
radioTrigger();
Try
radioOption[i].addEventListener("click",choosenFollowUp);
or delegate:
const radioParent = document.querySelector("#main-page-content");
radioParent.addEventListener("click",function(e) {
// here you can check e.target
})