[英]Combine 3 functions into one in javascript
我試圖將這 3 個功能合二為一,但我這樣做之后,就行不通了。 你能幫我把這些結合起來嗎?
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';
}
}
};
並在 html 上使用showForm(id, name);
使用functionCollections.showForm(id, name);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.