1

我有这段 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 的样式设置为阻止。

问题是，我不断收到此错误：

“更改为空：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的链接，不知道，看起来很漂亮。

4

5 回答 5

8

这听起来好像 DOM 对象在引用它时不存在。可能在文档完全加载后更改您的代码以执行（或将 javascript 放在页面底部）

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

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

我现在唯一想做的就是从...中删除 Javascript 链接

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

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

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

a.firstChild.onclick = addFileInput;

但这显然会给您留下无效的锚标记。最佳实践建议您应该提供一种不使用 javascript 的方法，并在可用的情况下使用您的 javascript-method 覆盖该功能。

于 2008-11-11T00:12:39.820 回答
1

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

于 2008-11-11T00:25:31.217 回答
0

您需要将代码包装在 window.onload 事件处理程序、domReady 事件处理程序（在大多数现代 js 框架和库中可用）或放置在页面底部。

如您在此处看到的，放置在页面底部效果很好。

“Unobtrusive JavaScript”主题涵盖了将事件响应程序与您的标记分离，并且可以通过多种方式进行处理。通常，您希望在 window.onload 或 document.ready 事件中声明事件响应者。

于 2008-11-11T00:20:21.990 回答
0

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

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

于 2008-11-11T00:20:56.327 回答
0

对，我已经根据你的集体建议修改了一些东西，现在可以了。唯一困扰我的是锚内直接引用 Javascript

于 2008-11-11T00:33:46.877 回答