Javascript Complete Amateur？

Question

私はラジオボタンがクリックされたことに基づいてラジオボタンセットに選択ボックスを追加するために書いたjavascript関数を持っています。これは、どちらか一方をクリックすると実行されます。問題は、私はそれを配置するように設定されたスパンに新しい選択要素を追加することを止めることができないほど素人です。要素やそのinnerHtmlが設定されているかどうかを確認するさまざまな方法を試しています。そのチェックを使用して別の選択を作成するかどうかを決定します。これのどれも私のために働いていません。誰もがこれについてのチュートリアルの方向で私を指すことができます（私は検索してきた、ほとんどすべてを試して、私はそれが関数全体の構造とそのより簡単な問題を考えるようになるfez）。

ここにコードがあります。これに照らされた光は、SUPERに役立ちます。私はちょうどコードに自分自身を教えたので、これは恐ろしいです。助けてくれてありがとう！！

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

あなたがしかの新しい選択を追加し、あなたが新しいものを追加する前に、古いものを削除する必要があります。私はそれをテストしていない、

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ノードを動的に追加したり削除したりするにはまだ正確で有用な記事です。