使用 Javascript 函数变量定义 DOM 元素答案

【问题标题】：Using Javascript function variables to define a DOM element使用 Javascript 函数变量定义 DOM 元素
【发布时间】：2012-07-12 18:48:04
【问题描述】：

我正在使用是/否下拉框通过 CSS 隐藏条件表单元素。如果我手动定义表单名称和元素名称，它工作正常，但如果我尝试通过变量定义它们，它将不起作用。我已经进行了大约一个小时的故障排除和研究，但无济于事。这是我的 Javascript 函数。

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 端的 this 语句提取了正确的元素。

要清楚，如果我按照下面的示例手动输入变量名称，它将正常工作，并且 html this 语句返回我在下面使用的确切名称。

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

【问题讨论】：

您隐藏了选择是/否的同一个下拉列表对我来说似乎很奇怪，您不应该隐藏 other 下拉列表吗？

标签： javascript forms function variables

【解决方案1】：

访问表单中元素的函数有错误，请尝试：

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

【讨论】：

如果可能，您最好使用对象引用而不是名称，请参阅 anAgent 的示例。

【解决方案2】：

改变

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

到

document.forms[ formName ]

否则，您传递的名称就像您传递了“'PrimaryBankruptcyTypeDropDownList'”（注意双引号）。

【讨论】：

我尝试从 formName、elementName 和两者的组合中删除引号，但仍然无法正常工作。

【解决方案3】：

这应该让你开始。

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。

一些不错的读物：

【讨论】：

这项工作是可行的，但它的用途与我试图创建的功能不同。我希望能够通过将表单和元素的名称传递给函数来隐藏或显示具有与事件元素名称相同的 id 的 div。我有很多这样的二进制条件，如果我可以只传递变量，我宁愿不为每个条件编写单独的函数。
还有什么是提取元素所在的表单名称而不是 this.form.name 的有效方法？
您没有包含所有的 html。因此，如果您的元素包含在表单标签中，那么“this.form.name”是有效的。
这确实让我开始了。谢谢

【解决方案4】：

我最终弄明白了。为了使用 document.forms 的元素部分，您必须指定 elements[] 和里面的变量：

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");
    }
}

【讨论】：