使用Javascript函數變量定義DOM元素

我使用yes/no dropdownbox來通過CSS隱藏條件表單元素。它工作正常，如果我手動定義表單名稱和元素名稱，但如果我嘗試通過變量定義它們將無法正常工作。我一直在進行故障排除和研究大約一個小時，但無濟於事。這是我的Javascript功能。使用Javascript函數變量定義DOM元素

function binaryHideShow(formName, elementName) 
{ 
    if (document.forms["'" + formName + "'"].elementName.value == "yes") 
    { 
     document.getElementById("'" + elementName + "'").setAttribute("class","show"); 
    } 
    else 
    { 
     document.getElementById("'" + elementName + "'").setAttribute("class","hide"); 
    } 
}

這裏是HTML元素。

<select name="PrimaryFiledBankruptcyDropDownList" onchange="binaryHideShow(this.form.name, this.attributes['name'].value);"> 
<option value=""></option> 
<option value="yes">Yes</option> 
<option value="no">No</option> 
</select> 

<div id="PrimaryFiledBankruptcyDropDownList"> 
<label for="PrimaryBankruptcyTypeDropDownList">Bankruptcy Type:</label> 
<select name="PrimaryBankruptcyTypeDropDownList" onchange=""> 
<option value=""></option> 
<option value="chapter-7">Chapter 7</option> 
<option value="chapter-13">Chapter 13</option> 
</select> 
</div>

我已經確保了我的HTML側這一聲明是拉動正確的元素。

要清楚，如果我手動輸入變量名稱按照下面的例子，它將正常工作，並且這個語句的html返回下面我使用的EXACT名稱。

function binaryHideShow() 
{ 
    if (document.forms["ProgramApplicationForm"].PrimaryFiledBankruptcyDropDownList.value == "yes") 
    { 
     document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","show"); 
    } 
    else 
    { 
     document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","hide"); 
    } 
}

來源

2012-07-12 bmanhard

這似乎很奇怪，我說你隱藏在其中選擇是相同的下拉列表/不，你不應該隱藏**其他**下拉列表嗎？ – 2012-07-12 21:13:28

有y中的錯誤我們用於訪問您表單中的元素的函數，請嘗試：

function binaryHideShow(formName, elementName) 
{ 
    if (document.forms[formName][elementName].value == "yes") 
    { 
     document.getElementById(elementName).setAttribute("class","show"); 
    } 
    else 
    { 
     document.getElementById(elementName).setAttribute("class","hide"); 
    } 
}

來源

2012-07-12 21:09:12

如果可能，最好使用對象引用而不是名稱，請參閱* anAgent *的示例。 – 2012-07-12 21:15:53

變化從

document.forms["'" + formName + "'"]

到

document.forms[ formName ]

否則你傳遞一個名字，如果你做了「 'PrimaryBankruptcyTypeDropDownList'」（注意雙引號）。

來源

2012-07-12 18:52:59 Robert

我試着從formName，elementName和兩者之一的組合中刪除引號，但它仍然無法正常工作。 – bmanhard 2012-07-12 19:00:19

這應該讓你開始。

HTML

<form name="MyForm" id="MyForm"> 
    <select name="PrimaryFiledBankruptcyDropDownList"nchange="binaryHideShow(this,this.form);"> 
     <option value=""></option> 
     <option value="yes">Yes</option> 
     <option value="no">No</option> 
    </select> 
</form>

的JavaScript

function binaryHideShow(element,form) { 
    console.log("Element Name: " + element.name); 
    console.log("Form Name: " + form.name); 
    if(element.value == "yes") { 
     console.log('sure does'); 
    } else { 
     console.log('nope'); 
    } 
}

題外話 - 但是，你可能會發現這很有用...

看到從您的視圖分離你的行動 - 意思是：擺脫「onchange」事件，如果可能的話 - 考慮使用jQuery。

一些很好的讀取你：

來源

2012-07-12 19:03:29 anAgent

這項工作，但它並沒有達到我試圖創建的功能的目的。我希望能夠通過將表單和元素的名稱傳遞給函數來隱藏或顯示與事件元素的名稱相同的ID。我有很多這些二進制條件，我寧可不寫一個單獨的函數，如果我可以傳遞變量。 – bmanhard 2012-07-12 19:10:48

什麼是有效的方式來拉一個元素所在的表單名稱而不是this.form.name？ – bmanhard 2012-07-12 19:12:56

你沒有包含所有的html。所以，如果你的元素被封裝在表單標籤中，那麼「this.form.name」是有效的。 – anAgent 2012-07-12 19:21:13

我最終弄明白了。爲了使用你有document.forms的元素部分內指定的元素[]與變量，例如：

function binaryHideShow(formName, elementName) 
{ 
    if (document.forms[formName].elements[elementName].value == "yes") 
    { 
     document.getElementById(elementName).setAttribute("class","show"); 
    } 
    else 
    { 
     document.getElementById(elementName).setAttribute("class","hide"); 
    } 
}

來源

2012-07-13 14:42:36 bmanhard

使用Javascript函數變量定義DOM元素

回答

相關問題