Having problem with 'function drop(ev)'

programming
1

Hello again…
Hmm… I can’t spot the Error(s) , need another set of eyes .
Thanks for your Help…
Having trouble here:
<td id="r1f2" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"></td>
and here:

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Getting these Errors ;
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:163 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:163:13)
at HTMLTableCellElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:102:171)
drop @ Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:163
ondrop @ Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:102
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:163 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:163:13)
Can run code from here ;
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html
Full code is below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html</title>
<!--  https://www.freeformatter.com/html-validator.html  -->
<style>
body {
      margin: 20px;
      background-color: #FFFFFF;
    }
.flex-container {
  display: flex;
}

.flex-container > div {
  font-size: 20px;
}
    #container {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      counter-reset: itemCount;
    }
    .item {
	  display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      background-color: #F5F5F5;  //  whitesmoke 
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
	  z-index: 8;
    }
	
.flatOne , .sharpOne , .naturalOne { background-color: #DCDCDC; 
z-index: 5;
}
	
td {margin: auto;
}
	
#elem1 , #elem2 , #elem3 , #elem4(
)

.flatOne , .one , .sharpOne , naturalOne {
}
	
#itemContainer {    }
#tableContainer {    }
#fretboardContainer { background-color: #DCDCDC; 
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
   .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
  </style>
</head>

<body>
<div id="outerContainer" ondrop="drop(event)"  ondragover="allowDrop(event)" style="background-color: pink; top: 4px;  left: 4px; height:200px;  border: 4px;">  <!--  BEGIN OF id="outerContainer  -->

<div>
  X: <span id="x"></span><br>
  Y: <span id="y"></span>
</div>

<!--  BEGIN of id="itemContainer"  -->
<div id="itemContainer"  class="flex-container POS" style=" position: absolute;  left: 500px; top; 40px; ">  
  <div class="item flatOne" id="elem1" onclick="cloneElem1()"      style=" z-index:5;  left: 100px;    background-color: #DCDCDC" > b</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item one" id="elem2"            style=" z-index:5;  left: 400px;    background-color: #FF0004;" > 1</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item sharpOne" id="elem3"    style=" z-index:5;  left: 700px;    background-color: #DCDCDC;" > ♯</div>   
  <p>&nbsp;&nbsp;</p>
  <div class="item naturalOne" id="elem4"  style=" z-index:5;  left: 1000px;  background-color: #DCDCDC;" > ♮</div>   
</div>   <!--  END of id="itemContainer"  --> 

<div id="tableContainer" style="  position: absolute;  top: 155px; left: 55px; ">  <!--  BEGIN of id="tableContainer"  -->
<table   id="fretboardContainer" style=" position: absolute ; width: 1200px;">    <!-- BEGIN of  id="fretContainer"  -->
<!--  Start Copy Here  -->
<tbody id="tbodyId" style="background-color:#636363;">
<tr style="height: 40px; border-bottom: 2px solid red;  border-top: 3px solid white;">  
<!-- Row 1  -->
<td id="r1f1" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 3px solid white;  border-top: 4px solid white;">
</td>
<td id="r1f2" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;">
</td>
<td id="r1f3" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"> 
</td>
<td id="r1f4" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;">
</td>
</tr>
</tbody>
</table> <!--  END OF  fretContainer   -->
</div>    <!--   END OF  tableContainer   -->
</div>    <!--  END OF id="outerContainer  -->

<div style='text-align: center; position:absolute; bottom: 40px;'>Drag and Drop</div>

<!--  BEGIN SCRIPT  ZZZZZZZZZZZZZZZZZ  -->
<script>
window.addEventListener('mousemove', (event) => {
  let x = event.clientX;
  let y = event.clientY;

  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
});
</script>

<script>
var elemNumber = 1; 
</script>

<script>
function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');
console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);

// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
clone.draggable = 'true';
elemNumber = elemNumber + 1

// Inject it into the DOM
elem.after(clone);

}
</script>

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

Instructions:
Go to here:
[Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html]
Open up Console
Click on the ‘b’ grey circle
Drag the Cloned ‘b’ grey circle onto the Dark Grey Fretboard .
See Errors in Console.log .
Thanks

These are Errors I am getting .
Code:Copy to clipboard
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
at HTMLTableCellElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:108:171)
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
at HTMLDivElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:82:160)

2

Your main problem was missing some attributes on the draggables and a couple of other things.
Dont know dragging myself so thought it was a good way to learn so fixed your code. Also added the ability to drag elements to the background to discard them and to drag from one cell to the other. I put comments through your code to show the changes and wotnot. ItsADrag - Replit
Anything not make sense or any other questions just ask, hope it helps.

Oh and I wasnt sure what this was meant to do, so hope I got it right :stuck_out_tongue_winking_eye:

3

Hmm…
Interesting , At the same time as you were Replying to this Post , I was Replying to your “Finished learning basics of html and css. Want to do some project”
Thanks for your Post .
But it Doesn’t CLONE .
Try your code here:
https://vmars.us/Try-It-Html-Editor/HTML-LIVE-Code-Editor-2-Panes-VM.html
Thanks

4

Im not refactoring the code for that place, sorry.
What do you mean it doesnt clone? If you drag one of those symbols from the top right to one of the cells then a clone of that symbol will be placed in the cell. I dont know what you want to happen?

Oh, I just saw the update to this post where you say what should happen. I did this before that edit and didnt have any idea what the cloning on click was for so got rid of it…not needed anyways, just drag it down, dont bother cloning first.

5

Well friends:
Here’s what I have so far:
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-10-Circles-4-Frets-CLONE-RO-WEB.html
Now the only thing left to do is be able to Drop anywhere on the page ,
so I’ll start a new Post for Help with that .

6

All of your elem clone functions could be replaced with this…

function cloneElem(event){
// Get the element
/// the event.target is the element that was clicked on
var elem = event.target; //document.querySelector('#elem1');
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);
clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
/// get the id for the element (same value as what you where using in all your different functions
clone.id = elem.id + elemNumber;
clone.draggable = 'true';
elemNumber = elemNumber + 1

// Inject it into the DOM
elem.after(clone);
}

…just change all the onclicks to cloneElem(event)

Why do you put all your functions in seperate script tags?

Small thing, really doesnt matter here, but updating the dom on events like resize, mousemove and what ever I cant remember (basically anything that is going to happen multiple times in one frame) is a bad idea (looking at what update the x,y postion of the mouse). Reason is your making the browser recalculate the dom when it doesnt have to which can cause an unnecessary repaint. Like I said, small thing, but can affect performance and should be avoided by only updating the dom on requestAnimationFrame.

EDIT: Oh, and adding a numeric character to an id that ends in a numeric character isnt a good idea. Its ok here because you only have 10 items but if you had 11 you might encounter problems (elem1+1=elem11). Good to put a dash or something in between. So…
clone.id = elem.id + elemNumber;
…becomes…
clone.id = elem.id + “-” + elemNumber;