JavaScript只會基於onClick事件執行一次函數？

Question

我正在開發一個程序，該程序將輸出XML代碼以便複製粘貼。我設置了複選框，並希望用戶能夠檢查某些值，然後輸出特定的XML代碼行。問題是一旦他們點擊按鈕，一旦它不會再次執行。任何想法爲什麼？

相關的JavaScript：

function add() { 
if (document.getElementById("POTBDetail").checked) { 
       if (document.getElementById("STT").checked) {  
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POSalesTaxTotalVar" select="\'Y\'"/> \n'; 
       } 
       else { 
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POSalesTaxTotalVar" select="\'N\'"/> \n'; 
       } 
       //if they want discount total var showing 
       if (document.getElementById("DT").checked) {   
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="PODiscountTotalVar" select="\'Y\'"/> \n'; 
       } 
       else { 
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="PODiscountTotalVar" select="\'N\'"/> \n'; 
       } 
       //if they want credit total var showing 
       if (document.getElementById("CT").checked) {   
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POCreditTotalVar" select="\'Y\'"/> \n'; 
       } 
       else { 
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POCreditTotalVar" select="\'N\'"/> \n'; 
       } 
       //if they want freight total var showing 
       if (document.getElementById("FT").checked) {   
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POFreightTotalVar" select="\'Y\'"/> \n'; 
       } 
       else { 
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POFreightTotalVar" select="\'N\'"/> \n'; 
       } 
       //if they want freight total var showing 
       if (document.getElementById("POLIT").checked) {  
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POExtTotalVar" select="\'Y\'"/> \n'; 
       } 
       else { 
        TheTextBox.value = TheTextBox.value + '<xsl:variable name="POExtTotalVar" select="\'N\'"/> \n'; 
       } 
      }//end of if detail is checked 
}//end of function 

相關HTML：

<form name="input" method="get"> 
<h3>How do you want the information displayed in the Purchase Order Total Box at the 
bottom of the page?</h3> 
<input type="checkbox" name="POTBDetail" id = "POTBDetail" value="Detail">Detail (Please check off all items you want displayed in the box) See Ply 1 – G of template for printed example<br> 
<input type="checkbox" style = "margin-left:5em" name="POLIT" id = "POLIT" value="PO Line Item Total">PO Line Item Total<br> 
<input type="checkbox" style = "margin-left:5em" name="CT" id = "CT" value="Credit Total">Credit Total<br> 
<input type="checkbox" style = "margin-left:5em" name="STT" id = "STT" value="STT">Sales Tax Total<br> 
<input type="checkbox" style = "margin-left:5em" name="DT" id = "DT" value="Discount Total">Discount Total<br> 
<input type="checkbox" style = "margin-left:5em" name="FT" id = "FT" value="Freight Total">Freight Total<br> 
<input type="checkbox" name="POTBTotal" id = "POTBTotal" value="Total">Show PO Total Only, no Detail Items See Ply 3 – C of template for printed example<br> 
<input type="checkbox" name="POTBNone" id = "POTBNone" value="None">None – I don’t require a PO Total Box on this copy of the PO<br> 
<h3></h3> 

<input type="button" value = "convert to text!" id = "button" onClick = "add()"/> 
</br> 
<textarea id = "output" style = "width:90%;height:40%;" onClick = "this.select();"></textarea> 
</form> 

作爲一個側面說明它的工作正如預期的一次，僅僅只有一次。感謝所有的幫助！

Answer 1

您在函數的開頭沒有清除輸出，所以它只會繼續添加在現有文本之上。可以使用variable +=而不是variable = variable +。您還可以利用對象，數組，循環，某種類型轉換和立即調用函數表達式（IIFE）來大大簡化邏輯。

var add = (function(){ 
 
    var output = document.getElementById('output'); 
 
    var detail = document.getElementById("POTBDetail"); 
 
    var checkboxes = { 
 
     POSalesTaxTotalVar: document.getElementById("STT"), 
 
     PODiscountTotalVar: document.getElementById("DT"), 
 
     POCreditTotalVar: document.getElementById("CT"), 
 
     POFreightTotalVar: document.getElementById("FT"), 
 
     POExtTotalVar:  document.getElementById("POLIT") 
 
    }, keys = Object.keys(checkboxes); 
 
    var select = ['N','Y']; 
 
    return function() { 
 
     output.value = ''; 
 
     if (!detail.checked) return; 
 
     for(var i in keys) { 
 
      var key = keys[i] 
 
      var sel = select[+checkboxes[key].checked]; 
 
      output.value += '<xsl:variable name="' + key + '" select="\'' + sel + '\'"/> \n'; 
 
     } 
 
    } 
 
})();

<form name="input" method="get"> 
 
    <h3>How do you want the information displayed in the Purchase Order Total Box at the 
 
bottom of the page?</h3> 
 
    <input type="checkbox" name="POTBDetail" id="POTBDetail" value="Detail">Detail (Please check off all items you want displayed in the box) See Ply 1 – G of template for printed example<br> 
 
    <input type="checkbox" style="margin-left:5em" name="POLIT" id="POLIT" value="PO Line Item Total">PO Line Item Total<br> 
 
    <input type="checkbox" style="margin-left:5em" name="CT" id="CT" value="Credit Total">Credit Total<br> 
 
    <input type="checkbox" style="margin-left:5em" name="STT" id="STT" value="STT">Sales Tax Total<br> 
 
    <input type="checkbox" style="margin-left:5em" name="DT" id="DT" value="Discount Total">Discount Total<br> 
 
    <input type="checkbox" style="margin-left:5em" name="FT" id="FT" value="Freight Total">Freight Total<br> 
 
    <input type="checkbox" name="POTBTotal" id="POTBTotal" value="Total">Show PO Total Only, no Detail Items See Ply 3 – C of template for printed example<br> 
 
    <input type="checkbox" name="POTBNone" id="POTBNone" value="None">None – I don’t require a PO Total Box on this copy of the PO<br> 
 
    <input type="button" value="convert to text!" id="button" onClick="add()" /><br> 
 
    <textarea id="output" style="width:90%;height:40%;" onClick="this.select();"></textarea> 
 
</form>