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 +. Вы также можете использовать объекты, массивы, цикл, преобразование определенного типа и выражение Exited Exited Function Expression (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>