Jump to content

addEventListener and cloneNode uncaught errors ??


vmars316
 Share

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>

 

Link to comment
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.

Link to comment
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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...