div 仍为 null答案

【问题标题】：Div reading as null stilldiv 仍为 null
【发布时间】：2023-04-05 19:41:02
【问题描述】：

第二部分是出于某种原因读取 null。它适用于第一部分。

window.onload = function() {
var div = document.createElement("div");
div.innerHTML = '<img alt="pickle" src="images/pickle">';
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "3";
div.className = "jack";
document.body.appendChild(div);

第二部分

document.onmousemove=function(e){
  var x, y;
  if (e) {x=e.clientX; y=e.clientY;} 
  else {x=event.clientX;y=event.clientY;}
  var jack = document.getElementById('jack');
  jack.style.top=y+'px';
  jack.style.left=x+50+'px';
}};

window.onload = function() {
var div = document.createElement("div");
div.innerHTML = '<img alt="pickle" src="images/pickle">';
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "3";
div.className = "jack";
document.body.appendChild(div);

document.onmousemove=function(e){
  var x, y;
  if (e) {x=e.clientX; y=e.clientY;} 
  else {x=event.clientX;y=event.clientY;}
  var jack = document.getElementByClassName('jack');
  jack.style.top=y+'px';
  jack.style.left=x+50+'px';
  }};

<html>
<head>
</head>
<body>
</body>
</html>

【问题讨论】：

第二部分究竟是什么？你的html是什么？提供更好的例子

标签： javascript debugging console

【解决方案1】：

您的目标是 #jack，但该元素没有 id，只有一个类。将以下内容添加到您正在创建元素的代码部分。

div.id = "jack";

var div = document.createElement("div");
div.innerHTML = '<img alt="pickle" src="images/pickle">';
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "3";
div.id = "jack";
document.body.appendChild(div);

document.onmousemove=function(e){
  var x, y;
  if (e) {x=e.clientX; y=e.clientY;} 
  else {x=event.clientX;y=event.clientY;}
  var jack = document.getElementById('jack');
  jack.style.top=y+'px';
  jack.style.left=x+50+'px';
};

【讨论】：

【解决方案2】：

同样的故事： getElementsByClassName() 返回 HTMLCollection（HTMLElements 数组），getElementsByClassName("css-class")[0] 是找到的第一个 HTMLElement。

唯一的例外是 getElementById() 方法。它返回单个 HTMLElement（因为 id 属性是唯一的 - 一个文档不能包含具有相同 id 值的两个元素）

【讨论】：