在javascript中将3个函数合并为一个函数

Combine 3 functions into one in javascript

本文关键字：函数 一个 合并 javascript 中将 3个      更新时间：2023-09-26

我试图将这三个函数合并为一个函数，但这样做之后，它就不起作用了。你能帮我把那些组合起来吗

function showForm(id, name) {
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}
function TestForm(id, name) {
    document.getElementById('TestFormSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('TestFormSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}
function FormOne(id, name) {
    document.getElementById('FormOneSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('FormOneSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}

如果需要的话，这是HTML，我使用JSFiddle，运行后，选择右侧的表单，然后它会显示"下载表单"，但我不知道如何做到这一点。

<form name="forms" class="form1" id="first">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="dropdownMenu" name="budget" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="submitForm" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>
<form name="forms" class="form1" id="second">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="TestFormDropdown" name="budget" onchange="javascript: TestForm(document.getElementById('TestFormDropdown').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="TestFormSubmit" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>
<form name="forms" class="form1" id="second">
    <br />
    <p style="text-align: left;" class="form1">Choosing to Make A Difference</p>
    <select id="FormOneDropdown" name="budget" onchange="javascript: FormOne(document.getElementById('FormOneDropdown').value);">
        <option value="0"></option>
        <option value="#">Change Form</option>
        <option value="#">Scholarships and Grants</option>
    </select>
    <br />
    <br />
    <div id="FormOneSubmit" style="display: none; position:absolute; margin-top:-20px;">
        <input type="button" id="submit" value="Download Form" onclick="window.open(forms.budget.value,'newtab'+forms.budget.value)" />
    </div>
    <br />
</form>

试试这个：

function showForm (id, name)  { 
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) 
        document.getElementById('submitForm').style.display = "none";
     else 
        document.getElementById(i).style.display = 'block';
    }

JavaScript语句可以在代码块中分组，放在花括号｛…｝内。

你能试试这个吗？

var functionCollections = {
showForm : function(id, name) {
    document.getElementById('submitForm').style.display = "block";
    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
},
TestForm : function(id, name) {
document.getElementById('TestFormSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('TestFormSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
},
FormOne : function(id, name) {
    document.getElementById('FormOneSubmit').style.display = "block";
    if (id == 0) {
        document.getElementById('FormOneSubmit').style.display = "none";
    } else {
        document.getElementById(i).style.display = 'block';
    }
}

}；

在使用showForm(id, name);的html上使用functionCollections.showForm(id, name);

相关文章：