javascript - 使用 Javascript 函数变量定义 DOM 元素

Question

我正在使用是/否下拉框通过 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");
    }
}

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

从改变

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

到

document.forms[ formName ]

否则，您将传入一个名称，就好像您执行了“'PrimaryBankruptcyTypeDropDownList'”（注意双引号）。

score 0 · Accepted Answer

这应该让你开始。

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。

给你一些好读物：

score 0 · Accepted Answer

我最终弄清楚了。为了使用 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");
    }
}

javascript - 使用 Javascript 函数变量定义 DOM 元素

4 回答 4

Related

Reference