Javascript完全业余？

Question

我编写了一个javascript函数，用于根据单击的单选按钮将选择框添加到单选按钮集。当一个人单击另一个时，它就会这样做。问题是，我是一个业余爱好者，以至于我不能让它停止向我设置的范围中添加新的select元素。我不断尝试不同的方法来检查元素或其innerHtml是否已设置，然后使用该检查来决定是否创建另一个select。所有这些对我来说都不起作用。有没有人能给我指点一下教程的方向(我一直在搜索，几乎什么都试过了，没有fez，这让我觉得整个函数的结构更简单)。

这是代码，任何关于这一点的启示都将是非常有用的。我只是自学编程，所以我知道这很可怕。谢谢你的帮助！！

function moreInput(vInput)  {
var moreD = document.getElementById('moreD');
//document.write(moreD);
    if(vInput == \"approved\")  {
        if(moreD.length > 0)    {
            moreD.removeChild(approvedOpts);
        }
        var select = document.createElement(\"select\");
        select.options[0] = new Option('a');
        select.options[1] = new Option('b');
        select.options[2] = new Option('c');
        select.setAttribute(\"name\",\"approvedOptsA\");
    }
    if(vInput == \"denied\")    {
        //alert(moreD.innerHtml);
        //if(moreD.innerHtml === 'undefined')   {
            //moreD.removeChild(approvedOptsD);
            var select = document.createElement(\"select\");
            select.options[0] = new Option('x');
            select.options[1] = new Option('y');
            select.options[2] = new Option('z');
            select.setAttribute(\"id\",\"approvedOptsD\");
            select.
        //}
    }
moreD.appendChild(select);

}

Answer 1

在添加任何新元素之前，请删除所有元素。

下面的代码应该可以工作：

<script type=\"text/javascript\">

function moreInput(vInput)  {
    var moreD = document.getElementById('moreD');
        if(vInput == \"approved\")  {
            removeAllChildrens(moreD);
            var select = document.createElement(\"select\");
            select.options[0] = new Option('Comped Table');
            select.options[1] = new Option('Comped Drink');
            select.options[2] = new Option('Comped Cover');
            select.setAttribute(\"name\",\"approvedOptsA\");
        }
        if(vInput == \"denied\")    {
                removeAllChildrens(moreD);
                var select = document.createElement(\"select\");
                select.options[0] = new Option('Need to Reserve Table');
                select.options[1] = new Option('At Capacity');
                select.options[2] = new Option('Private Event');
                select.setAttribute(\"id\",\"approvedOptsD\");
        }
    moreD.appendChild(select);
}

function removeAllChildrens(cell) {
    if ( cell.hasChildNodes() ) {
        while ( cell.childNodes.length >= 1 ) {
            cell.removeChild( cell.firstChild );       
        } 
    }
}

 </script>

Answer 2

你只追加新的selects，在追加新的selects之前，你需要删除旧的selects。尝试下面的代码(我已经删除了您的注释行)：

function moreInput(vInput)  {
    var moreD = document.getElementById('moreD');
    if(vInput == "approved")  {
        if(moreD.length > 0)    {
            moreD.removeChild(approvedOpts);
        }
        var select = document.createElement("select");
        select.options[0] = new Option('a');
        select.options[1] = new Option('b');
        select.options[2] = new Option('c');
        select.setAttribute("name","approvedOptsA");
    }
    if(vInput == "denied")    {
        var select = document.createElement("select");
        select.options[0] = new Option('x');
        select.options[1] = new Option('y');
        select.options[2] = new Option('z');
        select.setAttribute("id","approvedOptsD");

    }
moreD.removeChild(document.getElementById("approvedOptsD"));
moreD.removeChild(document.getElementById("approvedOptsA"));
moreD.appendChild(select);

它可能会抛出一些警告，我还没有测试过它，但你应该知道你在寻找什么。

This是一篇关于使用javascript动态添加和删除dom节点的文章，虽然很旧，但仍然很准确和有用。