1
 <h1>This is my Puzzle</h1>
<h3>by Julian Blaschke </h3>
<h4 id ="result">Its wrong<h4>

<table>
  <tr>
    <th>Puzzle</th>
  </tr>
  <tr>
 <td><div id="dropdiv1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
  <tr>
 <td><div id="dropdiv4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv6" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
  <tr>
 <td><div id="dropdiv7" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv8" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
 <td><div id="dropdiv9" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  </tr>
 </table>



<table style="width:100%">
  <tr>
    <th>Puzzle</th>
  </tr>
  <tr>
    <td><img id="1" src="splitted\1.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="2" src="splitted\2.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="3" src="splitted\3.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="4" src="splitted\4.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="5" src="splitted\5.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="6" src="splitted\6.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>   
 <td><img id="7" src="splitted\7.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="8" src="splitted\8.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>
 <td><img id="9" src="splitted\9.png" draggable="true" ondragstart="drag(event)" width="100" height="80"></td>

  </tr>
 </table>


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");
  
if(ev.target.firstChild == null)
     ev.target.appendChild(document.getElementById(data));

     
}

function checkifright(){
document.getElementById("result").innerHTML =(document.getElementById("dropdiv1").firstChild.src);
if (document.getElementById("dropdiv1").firstChild.src == "file:///C:/Users/Julian/Desktop/SCHULE%20201617/BSD/HTML_JavaSccript/Blaschke_Puzzle/splitted/1.png")
if (document.getElementById("dropdiv2").firstChild.src == "file:///C:/Users/Julian/Desktop/SCHULE%20201617/BSD/HTML_JavaSccript/Blaschke_Puzzle/splitted/2.png")
  document.getElementById("result").innerHTML ="right";

}

How can I check in the if statment if the target has already a child.In my if it appends two times a picture but it should only be added one time...

I don't undestand why. It should work fine but it appends two times the same picture the 3 time it does not go in the if statment

igodie
  • 497
  • 1
  • 4
  • 16
  • `if ( element.hasChildNodes() ) {...`, but what you have should work as well – adeneo Nov 05 '16 at 15:12
  • Your `if` statement should work just fine. You haven't provided an example of an actual issue. We have no idea where the `drop()` function is bound and what the markup looks like. –  Nov 05 '16 at 15:26

1 Answers1

0

I faced the same issue and solved it by checking the length of the target child nodes:

 if (ev.target.className == 'what_ever' && ev.target.childNodes.length == 0){
      ev.preventDefault();
    }

I hope you already found a solution!

Georgios
  • 1,454
  • 6
  • 17
  • 34