无线电输入上的 onclick 事件未触发功能
Posted
技术标签:
【中文标题】无线电输入上的 onclick 事件未触发功能【英文标题】:onclick event on radio input is not triggering function 【发布时间】:2021-09-03 02:36:54 【问题描述】:我定义了在某个网站上触发的元素,并将 onclick 属性附加到在此元素中创建的输入元素。现在我试图通过选择任一选项来触发该功能,但我收到错误消息: “未捕获的引用错误:未定义选择的后续操作 在 htmlInputElement.onclick"
这是我的代码:
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();
-
我已经尝试将 onclick 直接放在输入收音机上,但结果是一样的。
我无法使用 JQuery。
【问题讨论】:
radioOption[i].onclick=choosenFollowUp;
【参考方案1】:
试试
radioOption[i].addEventListener("click",choosenFollowUp);
或委托:
const radioParent = document.querySelector("#main-page-content");
radioParent.addEventListener("click",function(e)
// here you can check e.target
)
【讨论】:
谢谢。我使用了 radioParent.addEventListener("click", choosenFollowUp) :) 我记得我之前尝试过这个,但是在 radio 容器之后定义了 choosenFollowUp 并且它不起作用。因为那个而卡住了。使用上面定义的我的问题和radioParent的代码,它可以完美地工作。 太棒了。欢迎随时accept the answer以上是关于无线电输入上的 onclick 事件未触发功能的主要内容,如果未能解决你的问题,请参考以下文章
onClick和onChange不会在reactjs中的safari单选按钮上触发