Question

Here是小提琴。

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

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

Answer 1

您的HTML具有按钮的onclick属性，但随后在处理程序中添加了更多处理程序！您不应在addEventListener函数中进行radio次调用。每次单击时，它都会添加另一个处理程序，因此下一次单击会使其再次执行此操作。

http://jsfiddle.net/KcLj6/5/

已更新以修复删除按钮。

有一个更新的小提琴，我重新安排了一些代码。您需要选择将回调放入onclick，或使用addEventListener，而不是两者都使用。

添加按钮很奇怪

1 个答案: