JavaScript错误：[元素名称]没有属性。

Question

我正在对一个Web应用程序进行维护编码，但是我遇到了一个JavaScript错误：“[elementname]没有属性”。其中一部分代码是通过AJAX调用动态生成的，它会更改页面的部分innerHTML。在此之后，我需要将隐藏输入字段中的一段数据复制到可见输入字段中。因此，我们有目标字段：<input id="dest" name="dest" value="0">和源字段：<input id="source" name="source" value="1">。现在，当ajax运行时，它会覆盖源所在div的innerHTML，因此源字段现在读取：<input id="source" name="source" value="2">。

好的，在将ajax数据复制到innerHTML的javascript行之后，下一行是：document.getElementById('dest').value = document.getElementById('source').value;。我得到以下错误：Error: document.getElementById("source") has no properties（我还尝试了document.formname.source和document.formname.dest，但是出现了相同的问题）。

我错过了什么？

注意1：页面已完全加载，元素存在。ajax调用仅在用户操作之后发生，并替换元素所在的HTML部分。

注意2：至于不使用innerHTML，这就是代码库给我的方式，为了删除它，我需要重写所有ajax调用，而这不在当前维护周期的范围内。

注意3：innerHTML已更新为新数据，整个包含数据和格式的表格正在被复制，我正在尝试在这个大块的末尾添加一个布尔值，而不是为一个布尔值创建一个全新的ajax调用。看起来这就是我需要做的...因为我的hack方法不起作用。

额外的一双眼睛胜利了。

- Jim Ford

---

你能否发布一个小的、完全可运行的示例来复制你的问题？ - Jason Bunting

调试由 AJAX 调用修改的页面的一种方法是在浏览器中执行“全选”，然后将其复制并粘贴到能够理解 HTML 的工具中（我通常使用 Dreamweaver 在“设计模式”下的新空白页面）。这将为您提供生成的 HTML。像 FireBug 这样的工具也可以提供此功能。 - Diodeus - James MacFarlane

Firefox的Web开发者工具栏还可以让您从“查看源代码”菜单项中查看生成的源代码。 - Nick Sergeant

我构建了一个简单的例子，但它没有出现问题。我将不得不采取不同的方向。 - Jim Ford

@Jim：听起来很不错 - 希望你能得到它。 - Jason Bunting

Answer 1

"[elementname]没有属性"是JavaScript错误的说法，意思是“您尝试引用的元素不存在或为空”。

这意味着您可能有以下几个问题之一：

1. 页面还没有渲染，您尝试在它存在之前引用它 2. 拼写错误 3. 您将id命名为保留字（例如submit上的提交按钮） 4. 您认为您正在引用的实际上并不是（传递的变量不是您认为的那个）

- Steropes

---

...不错...那些是我最喜欢的之一！ - Jason Bunting

Answer 2

确保你的代码在页面完全加载后运行。如果你的代码在你要查找的元素呈现之前运行，就会发生这种类型的错误。

- Diodeus

Answer 3

您所描述的是这个功能：

<div id="test2">
    <input id="source" value="0" />
</div>
<input id="dest" value="1" />

<script type="text/javascript" charset="utf-8">
//<![CDATA[
function pageLoad()
{
    var container = document.getElementById('test2');
    container.innerHTML = "<input id='source' value='2' />";
    var source = document.getElementById('source');
    var dest = document.getElementById('dest');
    dest.value = source.value;
}
//]]>
</script>

这在常见的浏览器中都可以工作（我在IE、Firefox和Safari中检查过）；你是否使用了其他浏览器，或者你确定它在innerHTML操作中正确创建了元素？

- user19264

---

Ajax调用是由用户操作触发的，在整个页面加载完成后开始。整个字符串都被复制了，包括我试图从中获取数据的输入标签。 - Jim Ford

Answer 4

听起来对我来说好像DOM没有被更新为新元素。

此外，为什么要重写整个div来更改源输入呢？直接更改源的值不是同样容易吗？

- R. Bemrose

---

一个整个用HTML和数据预格式化的表格正在被复制，我正在向同一个ajax调用中添加1个更多的信息，我的目标不是为了引入第二个ajax调用来获取一个布尔值。这些值被写入后，在ajax运行后在页面上可见... - Jim Ford

Answer 5

这可能有点困难，但也许可以尝试一下 - 我以前见过这种情况，这个技巧确实有效。

所以，你说：

好的，在将ajax数据复制到innerHTML的javascript行之后，下一行是： document.getElementById('dest').value = document.getElementById('source').value;

将那一行改成这样：

setTimeout(function() {
   document.getElementById("dest").value = document.getElementById("source").value;
}, 10);

你真的不应该需要这个，但有可能是在设置innerHTML后尝试访问“source”元素的时间非常快，以至于浏览器无法找到它。我知道，听起来完全疯狂，但我曾经看到浏览器在某些情况下出现这种问题，原因超出了我的理解。

- JasonBunting

---

延迟并没有帮助...我一定还漏了什么。 - Jim Ford

抱歉我的延迟想法没有什么用！希望你能掌握这个技能，JavaScript 是那种让某些人感到沮丧的东西。 - Jason Bunting

除非是最后的手段或者处理插件时，我不建议使用超时。 - mwilcox

@mwilcox - 什么？我不明白你的评论为什么相关；更何况setTimeout在JavaScript中是一个非常有价值的函数。你的陈述毫无意义，因为你没有给出任何支持理由或资格。最后的手段是用来做什么的？当处理插件时它们如何帮助？你的评论脱离了上下文，看起来毫无意义。 - Jason Bunting

Answer 6

通常情况下，你不应该使用innerHTML，而是使用DOM方法创建元素。我无法确定这是否是你的问题。

- Erik

---

这就是代码库交给我的方式，我没有时间或权力重写所有的 ajax 调用。 - Jim Ford