Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

programming
1

TIA ,
I am getting this Error

Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html:61 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html:61:6[/code]

This is line #61:
elem.addEventListener(‘mousedown’, function(e) { // line 61

<!DOCTYPE HTML>
<html>
<style>
#elem1 {
  text-align: center;
} 
</style>

}
</style>

<body class="droptarget2">
<h1>HTML DOM Events</h1>
<h3>The ondragstart, ondragover, and ondrop Events
<br><br>
<a href=
"file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html">
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html
</a>
<br><br>
<a href=
"http://jsfiddle.net/f5EMT/1/
">
http://jsfiddle.net/f5EMT/1/
</a>
</h3>

<p>This example assigns "ondragstart", "ondragover" and "ondrop" events to the document object.</p>

<div class="droptarget">
  <p draggable="true" id="dragtarget">Drag me!</p>
</div>

<p>Drag the text back and forth between the two rectangles.</p>
<div class="droptarget"></div>

<div>
<img class="item" id="elem1" draggable="false" 
onmouseover="catchElem('elem1')" 
src="1-Red-Circle-Transp-32x32.png" style="z-index: 800; width: 34px; height: 34px; top: 4px; ">  
</div>


<p id="demo"></p>

<script>
var mousePosition;
var offset = [0,0];
//var div;
var isDown = false;
var elemNumber = 1;
var clodeId ;
var elem;
var left;
var top;

function catchElem(elem) {
console.log("function catchElem(elem) = " + elem) ;
}

elem.addEventListener('mousedown', function(e) {  // line 61
console.log("this.id = " + this.id);
console.log("elem = " + elem);
    isDown = true;
    offset = [
        elem.offsetLeft - e.clientX,
        elem.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        elem.style.left = (mousePosition.x)   // + offset[0]) + 'px';
        elem.style.top = (mousePosition.y)   // + offset[1]) + 'px';
    }
}, true);

</script>
</body>
</html>
2

You need to give elem a value before you (or your script) can act on it. So you need a line somewhere with elem = , and pick what you want to assign it to. You might want document.querySelector('#elem1'), for example.

Just for the sake of your own understanding, it’s also probably not a good idea to have a global variable named elem and a function parameter named elem (in your catchElem function). Otherwise you might end up thinking that they refer to the same thing, when they often won’t.

1 Like
3

Thanks krilnon ,
I’m sorry I don’t understand what you are saying .
I thought they were the same thing .
Please ,what is the difference .
Looking ahead , there will eventually be 10 images , not just 1 .
Like this ?

var elemNumber = 1;
var clodeId ;
//var elem;
var left;
var top;

function catchElem(imgID) {
console.log("function catchElem(elem) = " + imgID) ;
var elem = imgID ;

}
 
elem.addEventListener('mousedown', function(e) {  // line 61
console.log("this.id = " + this.id);
console.log("elem = " + elem);
    isDown = true;
    offset = [
        elem.offsetLeft - e.clientX,
        elem.offsetTop - e.clientY
    ];
}, true);

Thanks for your Help…

4

Well it seems I have made some headway .
But I am still getting Errors on lines 84 , 85 , 87 ,
and the image doesn’t move even though draggable=“true” is specified :

Uncaught TypeError: Cannot set properties of undefined (setting 'left')
    at HTMLDocument.<anonymous> (Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html:84:26)

Here is my code:

<!DOCTYPE HTML>
<html>
<style>
 #elem1{
    left:0 ;
	top:0 ;
}
 
</style>

<body class="droptarget2">
<h1>HTML DOM Events</h1>
<h3>The ondragstart, ondragover, and ondrop Events
<br><br>
<a href=
"file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html">
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Create-DIV-Drag-Drop-ANYWHERE-jsfiddle.html
</a>
<br><br>
<a href=
"http://jsfiddle.net/f5EMT/1/
">
http://jsfiddle.net/f5EMT/1/
</a>
</h3>

<p>This example assigns "ondragstart", "ondragover" and "ondrop" events to the document object.</p>

<div class="droptarget">
  <p draggable="true" id="dragtarget">Drag me!</p>
</div>

<div>
<img class="item" id="elem1" onmouseover="getElemID(this.id)" draggable="true" src="1-Red-Circle-Transp-32x32.png" style="z-index: 800; width: 34px; height: 34px; top: 4px; left:0; top:0; ">  
</div>

<p>Drag the text back and forth between the two rectangles.</p>
<div class="droptarget"></div>

<p id="demo"></p>

<script>
var mousePosition;
var offset = [0,0];
var isDown = false;
var elemNumber = 1;
var clodeId ;
var elem;
var elem = "elem11";
//var left;
//var top;
var x , y , clientX , clientY ;

function getElemID(imgID) {
console.log("function getElemID(elem) = " + imgID) ;
elem = imgID ;

}
 
addEventListener('mousedown', function(event) {  // line 58
console.log("addEventListener('mousedown' = " + elem);
//console.log("elem id = " + elem);
    isDown = true;
    offset = [
        elem.offsetLeft - event.clientX,
        elem.offsetTop - event.clientY
    ];
}, true);
 
document.addEventListener('mouseup', function() {
console.log("document.addEventListener('mouseup'" + elem )
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
//console.log("document.addEventListener('mousemove'" + elem )
    if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY 
        };
        elem.style.left  = (mousePosition.x + offset[0]) + 'px';  // line #84
        elem.style.top  = (mousePosition.y + offset[1]) + 'px';  // line #85
    }
//console.log("event.clientX = " + x )  ;      // line #87
}, true);
</script>

</body>
</html>