添加按钮很奇怪 [英] Add button acts weird

问题描述

这里是小提琴。

问题是添加按钮不会第一次响应。第二次，然后，而不是创建一个单选按钮，它会创建两个，第三个三，第四个四个等等。

> function RadioButtonContent（）
{
var rbc ='< h3>在此键入您的单选按钮：< / h3>< input type =textname =optionid =option value =Example 1/>< button id =AddButtononclick =radio（）>添加< / button>< button id =RemoveButton>删除< / button>< div id =updateDivRadio>< h1>单选按钮空间< / h1>< / div>';
var rbcAppen = document.getElementById（'radioButton'）;
var newNode = document.createElement（div）;
newNode.innerHTML = rbc;
rbcAppen.appendChild（newNode）;


函数radio（）
{
函数createRadioElement（elem，label，checked）{
var id ='option1_'+ label;
var div = document.createElement（'div'）;
div.innerHTML ='< input type =radioname =option1id ='+ id +'value =1/>< label for ='+ id +' >'+ label +'< / label>';
document.getElementById（'updateDivRadio'）。appendChild（div）;

$ b document.getElementById（'AddButton'）。addEventListener（'click'，function（）{
var x = document.getElementById（'option'）。value;
createRadioElement（this，x）;
}）;

$ b document.getElementById（'RemoveButton'）。addEventListener（'click'，function（）{
[] .forEach.call（document.getElementById（'updateDivRadio'）） .querySelectorAll（input），
function（el）{
if（el.checked）{
el.parentNode.remove（）;
}
}
）;
}）;

解决方案

您的HTML有一个 onclick 属性为按钮，但是然后在处理程序中添加更多处理程序！你不应该在 radio 函数中调用 addEventListener 。每次点击时，它都会添加另一个处理程序，因此下一次点击会使其再次执行一次。

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

更新到修复删除按钮。

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

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

解决方案

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.

这篇关于添加按钮很奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！