Javascript-目标DOM在一种情况下工作，而不是在另一种情况

Javascript - target DOM work in one case not another

本文关键字：工作 情况 另一种 情况下 一种 DOM 目标 Javascript-      更新时间：2023-09-26

我有一个javascript，当按下Ctrl+Enter时，它将调用CtrlEntInsertData():

function KeyPress(e) {
      var evtobj = window.event? event : e
      if (evtobj.keyCode == 13 && evtobj.ctrlKey) {
        CtrlEntInsertData();
      }
}
document.onkeydown = KeyPress;
function CtrlEntInsertData() {
var target = document.querySelector("input");
var tarpos = getPosition(target);    //!!<-- This work!
target.setAttribute('data', 10);     // Error line
console.log(tarpos.x+" "+tarpos.y);  //!!<-- This return x, y of target
   console.log(target);              //!!<-- NULL
}
function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
  }

这是我的HTML:

<div class="input" data="0" ></div>

我得到一个错误：

TypeError:null不是对象（正在评估"target.setAttribute"）

但当我把它用于getPosition()时，它确实给了我一些回报。为什么会这样，以及如何让它发挥作用？

此选择器

document.querySelector("input");

找到标签CCD_ 7的第一个元素。

如果要按类别input选择元素，则需要使用

document.querySelector(".input");

请参阅W3Schools关于CSS选择器的参考。

这是工作代码。您应该准确地选择元素，尽管我使用了selectByClassName，但我建议您选择ById

function CtrlEntInsertData() {
var target = document.getElementsByClassName("input")[0];//selects first element of this class
var tarpos = getPosition(target);    
target.setAttribute('data', 10);    
console.log(tarpos.x+" "+tarpos.y);  
   console.log(target);              
}
相关文章：