A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: [RESOLVED] AddEventListener dynamically

  1. #1
    Senior Member somlemeg's Avatar
    Join Date
    Aug 2000
    Posts
    170

    resolved [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>

  2. #2
    Senior Member somlemeg's Avatar
    Join Date
    Aug 2000
    Posts
    170
    Found the solution

    Code:
    	document.getElementById("d"+dotNr).addEventListener("mousedown",function(event){
    		mouseDownDrag(this.id);
    	});

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center