[RESOLVED] AddEventListener dynamically
I'm having trouble adding an EventListener to a image witch are created dynamically.
Here is the code I'm having trouble with:
Code:
var dotNr = 0;
function addDot() {
var img = document.createElement("img");
img.src = "imageOverlay_files/dots/d9.png";
img.id = "d"+dotNr;
img.draggable = "false";
//img.onmousedown = "mouseDownDrag(\'d0'\)";
//img.onmousedown = "mouseDownDrag(\'d" + dotNr + "\')";
var src = document.getElementById("header");
src.appendChild(img);
document.getElementById("d"+dotNr).setAttribute('draggable', false);
var mouseDownDragString = "mouseDownDrag(\'d"+dotNr+"\')";
document.getElementById("d"+dotNr).addEventListener("mousedown", eval(mouseDownDragString));
dotNr = dotNr + 1;
}
Here is my entire code:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<button onclick="addDot()">Add dot</button>
<div id="header"></div>
<p id="myP2" onmousedown="mouseDownDrag('myP2')" onmouseup="mouseUp()">
Click the text 2!
</p>
<img src="imageOverlay_files/dots/d9.png" alt="x" id="d10" class="dots" draggable="false" onmousedown="mouseDownDrag('d10')"/>
<img src="imageOverlay_files/dots/d9.png" alt="x" id="d11" class="dots" draggable="false" onmousedown="mouseDownDrag('d11')"/>
<script>
function mouseDownDrag(dragTargetId) {
dragTarget= document.getElementById(dragTargetId);
//dragTarget.style.color = "red";
dragTarget.style.position = 'absolute';
dragTarget.style.zIndex = 1000;
// move it from any existing parents directly to the body
// to position it relative to the body
document.body.append(dragTarget);
// and put this absolutely positioned text under the pointer
moveAt(event.pageX, event.pageY);
// centers the text on the coordinates (pageX, pageY)
function moveAt(pageX, pageY) {
dragTarget.style.left = pageX - dragTarget.offsetWidth / 2 + 'px';
dragTarget.style.top = pageY - dragTarget.offsetHeight / 2 + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
// move the text on mousemove
document.addEventListener('mousemove', onMouseMove);
// drop the text, remove unneeded handlers
onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
dragTarget.onmouseup = null;
};
}
var dotNr = 0;
function addDot() {
var img = document.createElement("img");
img.src = "imageOverlay_files/dots/d9.png";
img.id = "d"+dotNr;
img.draggable = "false";
//img.onmousedown = "mouseDownDrag(\'d0'\)";
//img.onmousedown = "mouseDownDrag(\'d" + dotNr + "\')";
var src = document.getElementById("header");
src.appendChild(img);
document.getElementById("d"+dotNr).setAttribute('draggable', false);
var mouseDownDragString = "mouseDownDrag(\'d"+dotNr+"\')";
document.getElementById("d"+dotNr).addEventListener("mousedown", eval(mouseDownDragString));
dotNr = dotNr + 1;
}
</script>
</body>
</html>
