I am trying to make a div follow my cursor while the cursor is inside another div and I am getting this error.
mouseOver.js:23 Uncaught TypeError: Cannot read property ‘style’ of null
at HTMLDivElement. (mouseOver.js:23)
That’s whats on line 23: m.style.top = e.clientY + ‘px’;
The code works partially. The div that is supposed to follow the cursor just jumps on the X axis, but not on the Y. And the error appears occasionally, not all the time.
const circle = document.querySelector('.item');
// const bdy = document.addEventListener('mousemove',function(e){
// mX = e.clientX;
// mY = e.clientY;
// console.log(mX);
// });
// let mX;
// let mY;
circle.addEventListener('mouseenter',function(){
this.appendChild(popUpInformation('Show some information about this blyat.Show some information about this blyat.Show some information about this blyat.Show some information about this blyat.'));
});
circle.addEventListener('mouseover',function(e){
console.log(this.childNodes[1]);
//this.childNodes[1].style.top = e.clientY +'px';
//this.childNodes[1].style.left = e.clientX - 115 +'px';
let m = document.querySelector('.moving');
m.style.top = e.clientY + 'px';
m.style.left = e.clientX + 'px';
});
circle.addEventListener('mouseleave',function(e){
this.removeChild(this.childNodes[1]);
});
function popUpInformation(infoText,e){
let newElem = document.createElement('div');
newElem.innerHTML = infoText;
//styling
newElem.className = 'moving';
newElem.style.position = 'absolute';
newElem.style.backgroundColor = '#FDDFDF';
newElem.style.borderRadius = '5px';
newElem.style.padding = '15px';
newElem.style.maxWidth = '230px';
newElem.style.top = 'inherit';
newElem.style.left = 'inherit';
return newElem;
}