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>