Question

我正在开发一个程序，它将输出XML代码以便于复制和粘贴。我设置了复选框，希望用户能够检查某些值，然后输出XML代码的特定行。问题是，一旦他们再次不执行此操作，他们会单击该按钮。有什么想法吗？

相关HTML：

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

作为旁注，它只能按预期工作一次，只需一次。感谢所有帮助的人！

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>

JavaScript只执行一次基于onClick事件的函数？

1 个答案: