Javascript 添加按钮行为怪异

这是小提琴

问题是“添加”按钮第一次没有响应。第二次是这样，然后不是创建一个单选按钮，而是创建两个，第三次是三个，第四次是四个，依此类推

function RadioButtonContent()
{
    var rbc = '<h3>Type your radio button here:</h3><input type="text" name="option" id="option" value="Example 1" /><button id="AddButton" onclick="radio()">Add</button><button id="RemoveButton">Remove</button><div id="updateDivRadio"><h1>Space for Radio Button</h1></div>';
    var rbcAppen = document.getElementById('radioButton');
    var newNode = document.createElement("div");
    newNode.innerHTML = rbc;
    rbcAppen.appendChild(newNode);
}

function radio()
{
    function createRadioElement(elem, label, checked) {
        var id = 'option1_' + label;
        var div = document.createElement('div');
        div.innerHTML = '<input type="radio" name="option1" id="' + id + '" value="1" /><label for="' + id + '">' + label + '</label>';
        document.getElementById('updateDivRadio').appendChild(div);
    }

    document.getElementById('AddButton').addEventListener('click', function () {
        var x = document.getElementById('option').value;
        createRadioElement(this, x);
    });


    document.getElementById('RemoveButton').addEventListener('click', function () {
        [].forEach.call(document.getElementById('updateDivRadio').querySelectorAll("input"), 
            function (el) {
                if (el.checked) {
                    el.parentNode.remove();
                }
            }
        );
    });
}

函数RadioButtonContent（）
{
var rbc='在此处键入您的单选按钮：AddRemoveSpace for单选按钮'；
var rbcAppen=document.getElementById（'radioButton'）；
var newNode=document.createElement（“div”）；
newNode.innerHTML=rbc；
rbcAppen.appendChild（newNode）；
}
函数无线电（）
{
函数createRadioElement（元素、标签、选中）{
变量id='选项1'+标签；
var div=document.createElement（'div'）；
div.innerHTML=''+标签+''；
document.getElementById（'updateDivRadio'）.appendChild（div）；
}
document.getElementById（'AddButton'）。addEventListener（'click'，function（）{
var x=document.getElementById（'option'）。值；
createRadioElement（这个，x）；
});
document.getElementById（'RemoveButton'）。addEventListener（'click'，函数（）{
[]forEach.call（document.getElementById（'updateDivRadio'）。querySelectorAll（“输入”），
功能（el）{
如果（标高已勾选）{
el.parentNode.remove（）；
}
}
);
});
}

您的HTML有一个按钮的

onclick

属性，但是在处理程序内部，您添加了更多的处理程序！您不应该在

无线电

函数中调用

addEventListener

。每次单击时，它都会添加另一个处理程序，因此下一次单击会使它多做一次

更新以修复删除按钮

---

有一个更新的提琴，我重新排列了一点代码。您需要选择将回调放入

onclick

，或者使用

addEventListener

，而不是两者都使用。

我单击了show，每次它都创建了一个回调。关于macHi@Huangism的最新FF。。。。它是

Add

按钮，而不是

Show

按钮。单击

Show

后，开始单击

Add

按钮。问题是每次单击都会调用

radio（）

。你需要检查是否已经有一个侦听器，如果有，不要添加新的侦听器。是的，有！！！天哪，我怎么会错过这个。。。你能帮我校正一下收音机的功能吗？邮寄，我接受。。我也会开始重新输入代码@Seiyria@envyM6Tesserex已经发布了一个很好的例子。大家好@Tesserex。。。。“删除”按钮现在不起作用。。。你能帮我调试一下吗？我想@envyM6已经修好了。