Jump to content
vmars316

addEventListener and cloneNode uncaught errors ??

Recommended Posts

Hello & Thanks :
I am getting 2 Uncaught errors (see code below): 
Here: container.addEventListener("touchstart", dragStart, false); 
And here:   var clone = elmnt.cloneNode(true);


Uncaught  Drag-ContainerClass-CloneNode-Forum.html:73  TypeError: Cannot read property 'addEventListener' of null
    at Drag-ContainerClass-CloneNode-Forum.html:73


2 Uncaught  Drag-ContainerClass-CloneNode-Forum.html:62  TypeError: elmnt.cloneNode is not a function
    at cloneByClassName (Drag-ContainerClass-CloneNode-Forum.html:62)
    at HTMLButtonElement.onclick (Drag-ContainerClass-CloneNode-Forum.html:57)

Plz, what am I doing wrong ?
Thanks

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Drag-ContainerClass-CloneNode-Forum.html</title>
<style>
    body {
      margin: 20px;
    }
    .container {
      width:  400px;
      height: 400px;
      background-color: #DAE9BC;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }

    .item {
      border-style: solid;
      border-width: 6px;
      touch-action: none;
      user-select: none;
      position: relative;
      width: 100px;
      height: 100px;
      background-color: #F3F8EA;
	  border-color: #006400;
      top: 0px;
      left: 0px;
    }

    .item:active {
      opacity: .75;
    }

    .item:hover {
      cursor: pointer;
    }
    
    h1 {
      margin-bottom: 10px;
    }
  </style>

</head>
<body>
<h5>Drag-ContainerClass-CloneNode-Forum.html</h5>
<div class="container">
<div class="item" contenteditable="true">  This is content.
</div>
</div> <!--   class="container"   -->
<br>
<button onclick="cloneByClassName()">cloneByClassName</button>
<br>
<script>
function cloneByClassName() {
  var elmnt = document.getElementsByClassName("container");
  var clone = elmnt.cloneNode(true);
  document.body.appendChild(clone);
}
</script>

<script>
    var container = document.querySelector("container");
    var activeItem = null;

    var active = false;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {

      if (e.target !== e.currentTarget) {
        active = true;

        // this is the item we are interacting with
        activeItem = e.target;

        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }

          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }

          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }

    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }

      active = false;
      activeItem = null;
    }

    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();

          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }

        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;

        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
	  
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>

</body>
</html>

 

Share this post


Link to post
Share on other sites

It means that document.querySelector("container"); is not returning an element. You forgot to use a class selector "." to select the element by its class attribute.

For the second error, document.getElementsByClassName("container"); returns a collection of elements, not a single element. You have to select one of the elements in that collection.

Share this post


Link to post
Share on other sites

Thanks;

Actually, the code should show multiple :

<div class="container"><div class="item" contenteditable="true">  This is content.</div></div> <!--   class="container"   -->
	
Edited by vmars316

Share this post


Link to post
Share on other sites

Sorry the editor is deleting my stuff .

I'll start again :

Thanks;


Actually, the code should show multiple :


<div class="container">
<div class="item" contenteditable="true">  This is content.
</div>
</div> <!--   class="container"   -->


Ingolme:
It means that document.querySelector("container"); is not returning an element. You forgot to use a class selector "." to select the element by its class attribute.

vm:
I don't understand;
isn't ("container") the class ?

Ingolme:
For the second error, document.getElementsByClassName("container"); returns a collection of elements, not a single element. You have to select one of the elements in that collection.

vm:
Do you mean this sort of thing ?:

  var x = document.querySelectorAll(".mydiv");
  var i;
  for (i = 0; i < x.length; i++) {
    ........... ;
  }

Where would I put this code?:

After this statement?:
function dragStart(e){

Thanks

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...