logo标签列表

JavaScript：document.getElementById() 返回NULL

javascripthtmlgetelementbyid
15

我对JavaScript还很陌生，用document.getElementById()时总是返回NULL，这让我很烦恼。

我的代码中有一个元素，我想获取它的坐标以便移动它。

以下是代码：

<html>
  <head>
    <script type="text/javascript" >
      function MoveIt(obj) {
        alert(obj); // returns "Object HTMLDivElement"
        var xx = document.getElementById("arect");

        if(document.getElementById("arect").value == null) {
          alert('NULL >> ' + xx.value);
        }
        else {
          alert('NOT NULL >>' + xx.value);
        }

        posX = xx.style.scrollTop;
        posY = xx.style.left;
      }
    </script>
  </head>

  <body bgcolor="white" >
    <DIV class="background" id="MyDiv2">  
      <div id="arect" name="arect" class="transbox" onmousedown="MoveIt(this);" >
      </div>
    </div>
  </body>
</html>

上述MoveIt()函数总是返回NULL

请考虑清理您的代码片段并删除 CSS，因为它只会给您的问题增加混乱。您确定存在一个 ID 为 "arect" 的元素，并且在 DOM 加载后调用了该代码吗？请提供与 JS 相对应的 HTML。 - scrappedcola
4
"<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">"这是SVG文件的开头，不是HTML页面的开头。 - thirtydot
@thirtydot：这可能是问题所在。 - gen_Eric
2
既然你将“this”传递到函数中，并且它应该等于你要获取的对象，为什么还需要“getElementById()”？你应该只需使用“obj”。 - Spudley
你将对象传递给了函数，但是你没有使用它 :( ... obj = document.getElementById('arect')。 - Kraz
我刚刚传递了我的对象以进行调试。 - pasta
6个回答
32

在尝试阅读页面内容之前需要先加载它们。请尝试 

window.onload = function() {
  // run your script in here
}

或者如果您正在使用jQuery，请优先选择

$(document).ready(function() {
  ...
}
8
“arect”元素是一个“<div>”元素，而“<div>”元素没有“value”属性。
另外，还需删除无效的SVG文档类型声明。
谢谢，我忘记删除SVG doctype了。现在"value"已经被删除了，但还是不起作用。 - pasta
@pasta 是的，实际上它确实可以工作-请确保您从<div>中消除所有对“.value”的引用-包括“xx.value”等。 - Pointy
非常感谢，现在它可以工作了。我进行了一些代码清理，现在它可以工作了 ;) 另外，你知道如何获取 <div> 的坐标吗？我尝试使用 obj.style.left，但是没有返回任何内容... - pasta
@pasta 获取通常的坐标可能会很棘手 - 可能应该单独编写一个完整的问题 :-) - Pointy
8
您从未检查过getElementById(...)是否为NULL。
您检查了getElementById(...).value是否为NULL，但是
标签没有"value"属性。
此外，请注意您忘记关闭<div />标签，这在XHTML中是不合法的...并且出于某种原因使用了SVG文档类型。 SVG不是HTML。
您在这里尝试做什么并不是很清楚。
谢谢，我忘了删除SVG的文档类型声明。现在已经删除了"value"，但还是不起作用。 - pasta
@pasta：'不起作用'是指什么？你想要做什么？你对document.getElementById的使用是正确的，所以可能是其他问题。 - Lightness Races in Orbit
这就是我的观点。我写的方式显然是“正确”的，但仍然存在问题，即document.getElementById("arect")始终为null。 - pasta
3
if(document.getElementById("arect").value == null){
    alert('NULL >> '+ xx.value);
  }

这段代码总是返回 null 或错误。如果你想查看对象是否存在，请按照以下步骤进行...

if(xx == null)
   alert('Object does not exist');
else 
   alert('Object exists. Inner HTML: ' + xx.innerHTML);

此外，div 没有 value 属性。如果您想获取 div 内的 HTML，请使用 xx.innerHTML。
@pasta：应该是什么？我看不到那个“div”里面的任何内容。 - Lightness Races in Orbit
-1
在我的情况下，是因为在 jsp/html（无论哪种）文件的开头有这行代码：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

删除它解决了我的问题。

-1
如果将按钮设置为visible=false，则无法在客户端获取该按钮的ID。要隐藏按钮，请使用：
button1.Style.Add("display","none")-- for visible false

并且

button1.Style.Add("display","block")-- for visible true

即使按钮被禁用，我们也无法在客户端获取按钮的ID。

您可以通过document.getElementById('<%= button1.ClientID %>')获取按钮的ID； 或者 如果在aspx页面中为控件设置了ClientIDMode="Static"，则可以直接通过document.getElementById('button1')获取它； 或者 document.getElementById('MainContent_button1');--- 这里的MainContent是内容占位符的ID，如果您有不同的内容占位符ID，请使用该ID_button1。

请不要在帖子后面签名。请阅读FAQ获取更多信息。 - betomontejo
问题中没有提到ASP.NET，但你似乎是从这个角度来考虑的。 - Sir Crispalot
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接