的Javascript動態條件句

Question

我想創建通過在下拉列表中選擇的值確定的字段的動態量。由於這將在客戶端執行，因此必須通過Javascript完成。我知道我可以通過創建所有前手的字段，然後簡單地使用CSS來顯示/隱藏每一個達到這種效果，但是這是一個很多重複的代碼。

通過試驗和錯誤我有這樣的工作，但它或者刪除我的價值，當更改我的dropdownlist或添加太多的箱子，如果我沒有它刪除之前創建新的箱子。

有一個簡單的方法來完成我想要做的，而對下拉列表的變化失去輸入的值？我在做什麼的嘗試如下。

function doAThing() { 
    var attemptsValue = parseInt(document.forms['ProgramApplicationForm'].elements['VerificationPrimaryHomePhoneAttemptsDropDownList'].value); 

    if (attemptsValue == null) { 
     document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null; 
    } else if (document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML == null) { 
     for (counter = 1; counter < attemptsValue + 1; counter++) { 
      document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
      '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' + counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>'; 
     }    
    } else { 
     document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null; 

     for (counter = 1; counter < attemptsValue + 1; counter++) { 
      document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
      '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' + counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>';    
     } 
    } 
} 

Answer 1

使用element.removeChild和element.appendChild而不是用innerHTML插手。這將使你刪除DOM中的特定節點：

<form name="ProgramApplicationForm"> 
<select id="VerificationPrimaryHomePhoneAttemptsDropDownList" name="VerificationPrimaryHomePhoneAttemptsDropDownList"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
    <div id="VerificationPrimaryHomePhoneAttemptDate"></div> 
</form> 

function createLabelElement(i){ 
    /* Create the label */ 
    var label = document.createElement("label"); 
    label.appendChild(document.createTextNode("Attempt "+i+" Date:")); // add text 

    /* create the input and set all attributes */ 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = ""; 
    input.id="p-dod-date-picker"; // ids should be unique! 
    input.maxlength = 10; 
    input.className = "size-ten"; 
    input.placeholder = "yyyy-mm-dd"; 
    input.title = "yyyy-mm-dd"; 
    input.pattern = "\d{4}-\d{2}-\d{2}"; 

    /* a label doesn't need "for", 
     you can actually put your input into the label element 
    */ 
    label.appendChild(input); 

    return label; // return the created element 
} 

document.getElementById('VerificationPrimaryHomePhoneAttemptsDropDownList').addEventListener('change',function(){ 
    var numberOfElements = parseInt(this.value); 
    var targetDiv = document.getElementById('VerificationPrimaryHomePhoneAttemptDate'); 

    // As long we have to many elements remove them 
    while(targetDiv.children.length > numberOfElements){ 
     targetDiv.removeChild(targetDiv.lastChild); 
    } 
    // As long we have not enough elements add more 
    while(targetDiv.children.length < numberOfElements){ 
     targetDiv.appendChild(createLabelElement(targetDiv.children.length + 1)); 
    } 
}); 

Demo

如果你願意，你仍然可以使用在創建的標籤innerHTML，這將使第一個函數小得多。還要注意的是null不是一個數字，它是一個對象。

Answer 2

好吧，你在這裏練了一些不好的做法。您正在以循環中的文檔的形式訪問innerHTML屬性。另外，你有'else if'和'else'完全相同。

我會改寫爲如下：

function doAThing() { 
var d = document; 
var attemptsValue = parseInt(d.forms['ProgramApplicationForm'].elements['VerificationPrimaryHomePhoneAttemptsDropDownList'].value); 

var attemptDate = d.getElementById('VerificationPrimaryHomePhoneAttemptDate'); 
if (attemptsValue == null) { 
     attemptDate.innerHTML = null; 
    } else { 

     var html = ""; 
     for (counter = 1; counter < attemptsValue + 1; counter++) { 
      html += 
      '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' + counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>'; 
     } 
     attemptDate.innerHTML = html; 
} 
}