Question

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

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

“已更改为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放在页面底部）

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

这不是问题 - 文档的组成部分按顺序加载。加载它们的速度并不重要，有些事情发生在别人面前：D

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

在那里放置一个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

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

放置在页面底部正常，您可以看到here。

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

Answer 4

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

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

Answer 5

是的，我根据你的集体消息修改了一些东西，现在就可以了。只有困扰我的是在锚点内直接引用Javascript

Javascript：var为null

5 个答案: