Need Help with ERROR insertBefore' on 'Node': parameter 2 is not of type 'Node

1

Thanks for your Help…
Having Problems with Create newElement:

10-CIRCLES-ONLY-FRETBOARD-1-IMAGE-CREATE-ELEMENTS.html:361 Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 2 is not of type 'Node'.
var elemNumber = 1;

var elemBgColor ; //
var floatLeft = "float:left" // 
var createId ;
var holdID;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();
holdID = event.target.id
console.log("holdID = " + holdID) ;

if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
 || holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10") 
 { console.log("Yep ,  " + holdID + "  is Clone-able !") ;
 }else{
  console.log("NOPE ,  " + holdID + "  is NOT Clone-able !") ;
  return ;
}

//Update the ID and add a class
holdID = 'elem2' + elemNumber;

console.log("New holdID = " + holdID)
elemNumber = elemNumber + 1
var elemName = elemName + elemNumber ;
var newElement = document.createElement(elemName);  
newElement.zIndex = elemNumber;
// Inject it into the DOM
let NodeName = document.getElementById("hr02").nodeName;
console.log("NodeName = " + NodeName) ;
document.body.insertBefore(newElement, NodeName);  // prob #1
}

I am still needing Help with this Post
https://forum.kirupa.com/t/dnd-how-to-force-clone-independant-behavior/656444/2
But in the mean time I am also trying this approach using Create-Elements . Hopefully I will get one of them working soon .

2

I think there are a few problems:

  • this → var newElement = document.createElement(elemName) only creates an element once (its not resuable)

  • I cant see where elemName is in your code (is it undefined and createElement() is being called with 1 + undefined // = NaN instead of a string?)

  • document.createElement() should have a valid tag e.g."div" or a custom element e.g. "my-element-1"

Let me know how you go :slightly_smiling_face:

1 Like
3

Thanks for your Help…
Sorry Steve , I’m not getting it .
https://www.vmars.us/Guitar/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-querySelectorAll.html
Here is the ERROR:

Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’:
The node before which the new node is to be inserted is not a child of this node.
at HTMLDocument.fireContextMenu

What does that mean ?

var catchFirstTimeThru = 0 ;
var elemNumber = 1;
var elemName ;
var NodeName ;
var elemBgColor ; //
var floatLeft = "float:left" // 
var createId ;
var holdID;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();
catchFirstTimeThru = catchFirstTimeThru + 1
if (catchFirstTimeThru <= 1) { return ; } ;
console.log("catchFirstTimeThru = " + catchFirstTimeThru ) ;
holdID = event.target.id
console.log("holdID = " + holdID) ;

if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
 || holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10") 
 { console.log("Yep ,  " + holdID + "  is Clone-able !") ;
 }else{
  console.log("NOPE ,  " + holdID + "  is NOT Clone-able !") ;
  return ;
}

// Name a New Element
holdID = 'elem2' + elemNumber;

console.log("New holdID = " + holdID)
elemNumber = elemNumber + 1
elemName = elemName + elemNumber ;
console.log("elemName = " + elemName) ;
newElement = document.createElement("div");  
newElement.zIndex = elemNumber;
// Inject it into the DOM 
//NodeName = document.getElementById("hr02").nodeName;
  var x = document.querySelectorAll("hr");
  NodeName = x[1];
  console.log("NodeName = " + NodeName) ;
document.body.insertBefore(newElement, NodeName);  // line # 369
//document.body.insertBefore(newElement, newElement);  
}

<!--  **What I want to do is Create a New one of these:**  -->

  <div class="item" id="elem1"   style=" position: relative; float:left; left: 30%; top:0; background-color: #FF0004;" >&nbsp;1</div>
<!--    -->
  <div class="item" id="elem2"   style=" position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;" >&nbsp;2</div>
4

In document.body.insertBefore(newElement, NodeName); the document.body part needs to be the parent of NodeName. The MDN docs are a little vague on this so I wouldnt blame ya for not getting it. The easiest way to do it is NodeName.parentNode.insertBefore(newElement, NodeName);

1 Like
5

[quote=“PAEz, post:4, topic:656450”]
NodeName.parentNode.insertBefore(newElement, NodeName);[/quote]
Awesome Help…
Thank you:
Everything above is working now .
https://www.vmars.us/Guitar/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
The only thing that’s not working is ondragover ondrop image .
No ERROR messages , and the ‘+’ sign shows-up , but can’t drop on image .
Here is the code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
</title>

<style>
    body {
      margin: 20px;
	  background-color: white;
    }

#elemContainer {
      width: 600px;
      height: 400px;
//      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
      float: left;
}

    .item {
      display: flex;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      width: 32px;
      height: 32px;
//      background-color: #F5F5F5;  //  whitesmoke 
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:26px;
	  z-index: 8;
    }

.item , #elem1{
  top: 250px;
  width: 28px;
  width: 28px;
  z-index: 1000;
  float: left;
  }

.item , #elem2 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
  }

#image1 {
   z-index:0;
}

.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF} 
#button2 { border: none; background-color: #CFD7E4;} 
#button3 { border: none; background-color: #E3E3E3; ;}  
#button4 { border: none; background-color: #FFFBEF;} 
#button5 { border: none; background-color: #FFFBA7;} 

#hr02 {
display = "block";
}
/*
    .item:active {
      opacity: .75;
    }
*/

    .item:hover {
      cursor: pointer;
    }
    
    h1 {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<!--
<div id="outerContainer">
-->

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">
<br>

  <div class="item" id="elem1"   style=" position: relative; float:left; left: 30%; top:0; background-color: #FF0004;" >&nbsp;1</div>
<!--    -->
  <div class="item" id="elem2"   style=" position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;" >&nbsp;2</div>
<!--    -->

<br><br><br>
<div style="height:25px;">
<hr id="hr01">  
<hr id="hr02" style="left:0px; display:none;">
</div>

</div>  <!--  id="elemContainer"     </div>   id="outerContainer"  -->
<br>

<div id="imageContainer" style=" position: absolute ; top:200px; left:54px; ">
      <img id="image1" ondragover="allowDrop(event)" ondrop="drop(event) " style=" z-index:0; width:1340px; height:284px; " src="https://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">
</div>  <!--  id="imageContainer"  -->

<div style=" background-color: white; width: 240px;  position: absolute ;  top: 520px; Left:550px;">

<div style="background-color: white; width: 300x;">
<button class="button"  id="button1" onclick="button1Clicked()">Color</button>
<button class="button"  id="button2" onclick="button2Clicked()">Color</button>
<button class="button"  id="button3" onclick="button3Clicked()">Color</button>
<button class="button"  id="button4" onclick="button4Clicked()">Color</button>
<button class="button"  id="button5" onclick="button5Clicked()">Color</button>
</div>
</div>

<p  id="notes" contenteditable ="true" style=" display: block;  
      height: 150px; width: 1200px; border-color: red; position: absolute ;  top: 580px; left: 55px; 
      border-width: 2px;  border-style: solid; border-color: green; " >Notes: 
</p>  

  <p class="item" class="three" onclick="alertHelp()" style=" position: absolute; top: 570px; width: 32px; left: 1280px; 
  background-color: #FFFF0D; display: block; " >? </p>
  
<script>
function allowDrop(event) {
  event.preventDefault();
}
</script>
  
<script>
function button1Clicked() {
document.getElementById("tbodyId").style.backgroundColor =  "#636363" ;
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
/*
    var elements = document.getElementsByClassName("pearlFret")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor = "#FFFBA7"  
  }
*/  
}
</script>

<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>

<script>
function button3Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#E3E3E3"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>

<script>
function button4Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBEF"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>

<script>
function button5Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBA7"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>

      <script>
         function alertHelp() {
            var newLine = "\r"
            var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop."
            msg += newLine;
            msg += "You can Download your Design , and Browser will keep everything in place!";
            msg+= newLine;
            msg += " ";
            msg += newLine;
            msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs.";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412";
            msg+= newLine;
            msg += "It takes good snapshots for Selected Regions.";
            msg+= newLine;
            msg += " ";
            msg+= newLine;
            msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49";
            msg+= newLine;
            msg += "Your ScreenShots will be quite Large.";
            msg+= newLine;
            msg += "Irfanview can Resize these to a much smaller image.";
            msg+= newLine;
            msg += "Have Fun !";
            alert(msg);
         }
      </script>
 
     <script>
// document.addEventListener("click", showMe(event));
      function showMe(event) {
         let X = event.screenX;
         let Y = event.screenY;
         let result = document.getElementById("result");
         result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y;
      }
   </script>

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

    var active = false;
	
if (elemContainer) {
    elemContainer.addEventListener("touchstart", dragStart, false);
    elemContainer.addEventListener("touchend", dragEnd, false);
    elemContainer.addEventListener("touchmove", drag, false);

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

    function dragStart(e) {
/*	
holdID = event.target.id

if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
 || holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10") 
 { console.log("NOPE ,  " + holdID + "  Cannot Drag !") ;
    return ;
 }
*/
      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 drop(event) {
  event.preventDefault();
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      active = false;
      activeItem = null;
    }

  
  

    function dragEnd(e) {
console.log("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>

<script>
var catchFirstTimeThru = 0 ;
var elemNumber = 1;
var elemName ; 
var NodeName ;
var leftPosition = 70 ;
var inComingID ;
var outGoingID ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();
inComingID = event.target.id ;

if (inComingID == "elem1" || inComingID == "elem2" || inComingID == "elem3" || inComingID == "elem4" || inComingID == "elem5"
 || inComingID == "elem6" || inComingID == "elem7" || inComingID == "elem8" || inComingID == "elem9" || inComingID == "elem10") 
 { console.log("Yep ,  " + inComingID + "  is Clone-able !") ;
 }else{
  console.log("NOPE ,  " + inComingID + "  is NOT Clone-able !") ;
  return ;
}

// Name a New Element
outGoingID = 'elem2' + elemNumber;

elemNumber = elemNumber + 1
//elemName = elemName + elemNumber ;
console.log("outGoingID = " + outGoingID)
console.log("elemNumber = " + elemNumber) ;
newElement = document.createElement("div");  
newElement.style.zIndex = elemNumber + 400 ;
newElement.style.borderRadius = "50%" ;
newElement.id = outGoingID ;
newElement.className = "item" ;  
newElement.draggable = "true" ;
leftPosition = leftPosition + 30 ;
newElement.style.left = leftPosition + "px" ;
if (inComingID == "elem1") {newElement.innerHTML = "&nbsp1";
      newElement.style.backgroundColor = "#FF0004" ;}
if (inComingID == "elem2") {newElement.innerHTML = "&nbsp2";
      newElement.style.backgroundColor = "#FE8E05" ;}
if (inComingID == "elem8") {newElement.innerHTML = "&nbsp♭";}
if (inComingID == "elem9") {newElement.innerHTML = "&nbsp♮";}
if (inComingID == "elem10") {newElement.innerHTML ="&nbsp#";}

// Inject it into the DOM 
  var x = document.querySelectorAll("hr"); 
  NodeName = x[1];   // there are only 2 <hr>s
NodeName.parentNode.insertBefore(newElement, NodeName);  // line # 381
}

/*
if(holdID == "elem1"){elemBgColor  =  "background-color: #FF0004;" }
if(holdID == "elem2"){elemBgColor  =  "background-color:#FE8E05;" }


//console.log(elemBgColor  + " " + floatLeft) ;
//newElement.style.background-color = elemBgColor;
//newElement.style.float = floatLeft;
//newElement.draggable = 'true';  // 150
//newElement.onclick = "helloConsole()"

*/
</script>
</body>
</html>