Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html

# Having problem with 'function drop(ev)' **URL:** \ **Category:** programming\ **Created:** [December 24, 2022, 1:41am UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710 "2022-12-24T01:41:31Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [December 24, 2022, 1:41am UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/1 "2022-12-24T01:41:31Z")

Hello again… Hmm… I can’t spot the Error(s) , need another set of eyes . Thanks for your Help… Having trouble here: `` and here: ```auto 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](https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html) Full code is below: ```auto Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html

X:
Y:

♯

♮

Drag and Drop

``` Instructions: Go to here: [[Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html](https://vmars.us/Guitar/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) ---

**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [December 24, 2022, 2:44pm UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/2 "2022-12-24T14:44:58Z")

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](https://replit.com/@PeterIrlam/ItsADrag#script.js) 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 😜 ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [December 24, 2022, 3:53pm UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/3 "2022-12-24T15:53:51Z")

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](https://vmars.us/Try-It-Html-Editor/HTML-LIVE-Code-Editor-2-Panes-VM.html) Thanks ---

**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [December 24, 2022, 3:59pm UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/4 "2022-12-24T15:59:05Z")

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. ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [December 25, 2022, 2:54pm UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/5 "2022-12-25T14:54:10Z")

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/9/5/95c39b63d1be681733f385a2b88d23613e7c2719.png "Go to Parent")](https://www.codeproject.com/Messages/5917221/Re-how-to-modify-cloned-element-draggable-attribut) 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](https://www.codeproject.com/Messages/5917326/Re-how-to-modify-cloned-element-draggable-attribut) 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 . ---

**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [December 25, 2022, 4:54pm UTC](https://forum.kirupa.com/t/having-problem-with-function-drop-ev/655710/6 "2022-12-25T16:54:57Z")

All of your elem clone functions could be replaced with this… ```auto 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;