CODEWITHSUNDEEP
javascripthtmldom
user2767541
user2767541

Reputation: 97

Uncaught Error: NotFoundError: DOM Exception 8?

I am working on drag and drop in HTML5 but when I dorp my item I got Uncaught Error: NotFoundError: DOM Exception 8 Any one help me .Please check my code below

<html>
<head>
<script>

 function drag(ev)
  {
console.log("call drag event method..");
 ev.dataTransfer.setData("Text",ev.target.id);
 }

function drop(ev)
{
console.log("call drop event method..");
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
}
 function allowDrop(ev)
{
 console.log("call allow event method..");
 ev.preventDefault();
}   
</script>
<body>
 <div id="selectedItems" style="overflow-y:scroll">
 <button draggable="true" ondragstart="drag(event)">FirstName</button>        
 <button draggable="true" ondragstart="drag(event)" >FirstName</button>
 <button draggable="true" ondragstart="drag(event)" >FirstName</button>
</div>
     <div id="selectedItems"  ondrop="drop(event)" ondragover="allowDrop(event)">


              </div>
</body>
</html>

But I am dropping the button's I got Uncaught Error: NotFoundError: DOM Exception 8 Any one help me

Upvotes: 1

Views: 3586

Answers (1)

PSL
PSL

Reputation: 123739

On Drag you are getting id of the element (buttons) and saving it in event data, but your mark -up doesn't have ids for button. So your appendChild fails as null(as document.getElementById returns null for empty id) is not a valid html node.

Try adding some id's to the button elements.

<button id="11"  draggable="true" ondragstart="drag(event)">FirstName</button>
<button id="21" draggable="true" ondragstart="drag(event)">FirstName</button>
<button id="31" draggable="true" ondragstart="drag(event)">FirstName</button>

Demo

Also noticed that you are duplicating the ids in divs, which is incorrect. ids must be unique in the document. You can remove the id from the first div.

Upvotes: 1

Related Questions