Question

Javascript：var 为空

2008-11-11

2950

javascript html null

我有这段 Javascript，但它就是不工作。我已经检查过 JSlint，但它说一切正常。仍然不起作用。javascript 不在 HTML 中，而是链接在 <head>

注意：我正在使用本地服务器，因此页面会立即加载。

function changeVisibility() {
    var a = document.getElementById('invisible');
    a.style.display = 'block';
}

var changed = document.getElementById('click1');
changed.onchange = changeVisibility;

这是相应的 HTML

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="javascript:addFileInput();">Attach another File</a>
</div>

因此，我单击输入，选择一个文件并批准。然后 onchange 事件触发，我的不可见 div 的样式设置为 block。

问题是，我一直收到此错误：

“changed is null: changed.onchange = changeVisibility;”

我不明白，我真的不明白我在这里忽略了什么。

编辑：问题已回答，感谢 Mercutio 的帮助，当然也感谢其他人的帮助。最终代码：

function loadEvents() {
    var changed = document.getElementById('click1');
    var a = document.getElementById('invisible');
    document.getElementById('addField').onclick = addFileInput;

    changed.onchange = function() {
        a.style.display = 'block';
    }
}
if (document.getElementById) window.onload = loadEvents;

这是相应的 HTML：

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="#">Attach another File</a>
</div>

此外，感谢 JSbin 的链接，我不知道这个，看起来很漂亮。

Answer 1

这听起来像是在引用 DOM 对象时它并不存在。也许可以更改代码，使其在文档完全加载后执行（或将 javascript 放在页面底部）

note: I am working with a local server, so pageload in instant.

这不是问题 - 文档的组成部分是按顺序加载的。加载速度有多快并不重要，有些事情会先于其他事情发生 :D

The onlything I'd like to do now is remove the Javascript link from the ...

在那里放置一个 id，然后在函数内执行以下操作：

document.getElementById('addField').onclick = addFileInput;

或者，由于您已经将 div 作为变量“a”：

a.firstChild.onclick = addFileInput;

但这显然会给您留下一个无效的锚标记。最佳做法建议您提供一种不使用 javascript 的方法，并使用您的 javascript 方法覆盖该功能（如果可用）。

Answer 2

mercutio 是正确的。如果该代码在 HEAD 中执行，则对“document.getElementById('click1')”的调用将始终返回 null，因为主体尚未解析。也许您应该将该逻辑放入 onload 事件处理程序中。

Answer 3

我认为这是因为您正在尝试修改文件元素。

浏览器通常不允许您这样做。如果您想显示或隐藏它们，请将它们放在 div 内，然后显示或隐藏它。