I have a game which requires a specific tile to be placed in a specific holder.
<div id="tile_holder1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<!--This allows the object to be dragged--><!--need to set draggable to true to enable the object to be dragged -->
<div id = "drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">
<!--This creates the object to be dragged-->
<button id = "tile1">Place a Square on to the ground to start to build your house</button></div>
So i want the object named tile1 to be dragged and dropped in tile_holder1. Im currently using Javascript and struggling how to correctly go about it. I want to store the required HTML divs within javascript variables and be able to use an IF statement to make sure the tile is in correct holder. I'm very new to Javascript and can't find a way to do it.
Ive created a function that will be processed on the play button been pressed. Any help would be great.
<button onclick="myFunction()" id = "play">Play Me</button>
<h1 id = "demo"></h1>
<script>
function myFunction() {
var message;
var test = document.getElementById('tile_holder1').innerHTML;
var test2 = document.getElementById('tile1').innerHTML;
if (//I want to be able to check that test2 is matched with correctly with test and if so display a message) {
message = "Good";
document.getElementById("demo").innerHTML = message;
};
}
</script>
Or would it be easier to use another programming language,possibly PHP?
