添加按钮的行为很奇怪

Question

Here is the fiddle.

The problem is Add button doesn't respond first time. Second time it does and then instead of creating one radio button it creates two, third time three, fourth time four and so on.

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

Your HTML has an onclick attribute for the buttons, but then inside the handler, you add more handlers! You shouldn't have the addEventListener calls inside the radio function. Each time you click, it's adding another handler, so the next click makes it do it an additional time.

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

Updated to fix remove button.

There is an updated fiddle where I've rearranged the code a bit. You need to choose to either put the callback in onclick , or use addEventListener , not both.