如何访问函数创建的HTML元素？元素是“未定义的”，因此不适用CSS

First of all here is a fiddle of the project as a whole: http://jsfiddle.net/7tj9xjb8/

首先,这里是整个项目的小提琴:http://jsfiddle.net/7tj9xjb8/

Now, I create a form containing a table with some select options and input fields. The thing I want to do is to change the visibility css property of the inputs in this form from hidden to visible once the last select option is selected ("Välj annat parti"). This is supposed to be done with a function named otherParty() that is called with an onchange attribute in the select tags. However, the variable "inputs" is undefined because the content doesn't appear to be in the actual HTML when it is called, which is strange because the function isn't called upon until the script has finished. This is probably because it's being created by another function, but my question is, how the hell do I fix this so that it works?

现在,我创建一个包含表的表单,其中包含一些选择选项和输入字段。我想要做的是在选择最后一个选择选项后将此表单中输入的可见性css属性从隐藏更改为可见(“Väljannatparti”)。这应该使用名为otherParty()的函数来完成,该函数在select标记中使用onchange属性进行调用。但是,变量“inputs”是未定义的,因为内容在调用时似乎不在实际的HTML中,这很奇怪,因为在脚本完成之前不会调用该函数。这可能是因为它是由另一个函数创建的,但我的问题是,我该如何解决这个问题呢?

Here is the cut out version of the code:

这是代码的剪切版本:

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

1 个解决方案

#1

One problem is that you've configured jsfiddle such that your JavaScript code is in a "load" handler, and you've set up your event handler in a way that makes that not work. The code should look like this:

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

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

Now once you've done that, you'll find out that this doesn't work:

现在,一旦你完成了,你会发现这不起作用:

inputs.style.visibility = "visible";

You simply cannot do that. You'll have to iterate through the node list returned from getElementsByTagName() yourself and set the style of each one separately.

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

#1