addEventListener and cloneNode uncaught errors ??

vmars316 · August 9, 2019

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>

Ingolme · August 9, 2019

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.

vmars316 · August 11, 2019

Thanks;

Actually, the code should show multiple :

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

Edited August 11, 2019 by vmars316

vmars316 · August 11, 2019

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

vmars316 · August 12, 2019

I would like to delete this post

and I'll start afresh .

Thanks

Edited August 12, 2019 by vmars316

Sign In

addEventListener and cloneNode uncaught errors ??

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity