Javascript 如何访问由函数创建的HTML元素?元素是“未定义的”,因此不可应用

Javascript 如何访问由函数创建的HTML元素?元素是“未定义的”,因此不可应用,javascript,html,css,Javascript,Html,Css,首先,这里是整个项目的一部分: 现在,我创建了一个表单,其中包含一个带有一些选择选项和输入字段的表。我想做的事情是,一旦选择了最后一个选择选项Välj annat parti,就将此表单中输入的visibility css属性从hidden更改为visible。这应该通过名为otherParty的函数来完成,该函数在select标记中使用onchange属性调用。但是,变量输入是未定义的,因为调用时内容似乎不在实际的HTML中,这很奇怪,因为直到脚本完成后才调用函数。这可能是因为它是由另一个函数

首先,这里是整个项目的一部分:

现在,我创建了一个表单,其中包含一个带有一些选择选项和输入字段的表。我想做的事情是,一旦选择了最后一个选择选项Välj annat parti,就将此表单中输入的visibility css属性从hidden更改为visible。这应该通过名为otherParty的函数来完成,该函数在select标记中使用onchange属性调用。但是,变量输入是未定义的,因为调用时内容似乎不在实际的HTML中,这很奇怪,因为直到脚本完成后才调用函数。这可能是因为它是由另一个函数创建的,但我的问题是,我该如何修复它才能正常工作

以下是代码的剪切版本:

function createDropDown() {

//These are the selects that call the otherParty function onchange. 

var select = document.createElement("select");
select.setAttribute("onchange", "otherParty()");
select.style.marginLeft = indent;
container.appendChild(form);
td.appendChild(select);

for (i = 0; i < type.length; i++) {
var option = document.createElement("option");
    option.value = option.innerHTML = type[i];
    select.appendChild(option);
}

table.appendChild(tr);
tr.appendChild(td);    

//These are the inputs that should show up

if (inputTrue) {
var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", inputType);
    input.setAttribute("alt", inputType);
    input.setAttribute("id", inputType);
    input.setAttribute("placeholder", "Annat parti");
    input.style.visibility = "hidden";
    td.appendChild(input);   
}

table.appendChild(tr);
tr.appendChild(td);

} //End of function

//Makes the inputs show up

function otherParty() {
    var inputs = document.getElementsByTagName('input'); //grab all the inputs in the form once they've been created
    inputs.style.visibility = "visible";
}

一个问题是,您已经配置了JSFIDLE,使得JavaScript代码位于加载处理程序中,并且您已经以一种不起作用的方式设置了事件处理程序。代码应该如下所示:

var select = document.createElement("select");
select.onchange = otherParty;
select.style.marginLeft = indent;
container.appendChild(form);
td.appendChild(select);
现在,一旦您这样做了,您会发现这是行不通的:

inputs.style.visibility = "visible";

你根本不能那样做。您必须自己遍历从getElementsByTagName返回的节点列表,并分别设置每个节点的样式。

代码太多。请发布精简版本。仅供参考,您不必使用.setAttribute来设置DOM元素属性。就像设置普通对象属性一样设置它们。@torazaburo就这样了。这样就行了,我不明白为什么你不能一次将css属性设置为all-in-go,而不必迭代?为什么会这样?@Chrillewoodz因为domapi根本不允许这样。从.getElementsByTagName返回的对象称为节点列表。它提供了访问节点的工具,但不提供任何其他操作。这类事情是像jQuery这样的DOM库提供的一种便利,所以从技术上讲,我可以用jQuery来代替它?也要使输入在选择下拉列表中的任何内容时不会出现,就像现在一样,但只是最后一件事?@Chrillewoodz是的,你可以用jQuery来做,但它不会直接帮助你实现下拉列表的逻辑。嗯,这可能会使检查所有下拉列表是否都设置为非默认选项变得更容易一些。