dream hunter dream hunter - 8 days ago 7
Javascript Question

How to move a div area to a particular id on a click event?

I have a 10 x 10 board and a button (in the demo given below I've minimized that to 3 x 3 ). When users click on the button the system generates a random number 1 to 9.



document.getElementById("btn").addEventListener("click",function(){

var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
alert(num);/* check the no*/
if(num === "1"){
/*i need to move the red circle to box no 1*/
}else if(num === "2"){
/*i need to move the red circle to box no 2*/
}
/*and so on upto 9*/
});

html,body{
width:100%;height:100%;
}

#board{
width:300px;
height:300px;
border:1px solid #000;

}
#one,#two,#three{
width:100%;
height:100px;
float:left;
}
.flag-point{
width:100px;
float:left;
height:100%;
}
#a8,#a2,#a4,#a6 {
background-color:green;
}

#crcl{
width:30px;
height:30px;
background-color:red;
border:1px solid #000;
border-radius:50%;
}

<div id="crcl"> </div> <button id="btn">move circle</button>

<div id="board">
<div id="one">
<div id="a9" class="flag-point">9</div>
<div id="a8" class="flag-point">8</div>
<div id="a7" class="flag-point">7</div>
</div>
<div id="two">
<div id="a6" class="flag-point">6</div>
<div id="a5" class="flag-point">5</div>
<div id="a4" class="flag-point">4</div>
</div>
<div id="three">
<div id="a3" class="flag-point">3</div>
<div id="a2" class="flag-point">2</div>
<div id="a1" class="flag-point">1</div>
</div>
</div>





Here each box has an id from a1 to a9. When users press the button each time I need to move the red circular div according to this random number to the corresponding box (ie, if you get a number 3 the red circle needs to move to box3(#a3)). How can I achieve this?

Answer

I suggest you use document.getElementById and HTMLNode#appendChild

That way you move the circle to be a child of the certain divs.

When you do appendChild on an existing node, it will be detached from wherever it is right now, and moved to the new parent.

document.getElementById("btn").addEventListener("click",function(){

var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
  alert(num);/* check the no*/
  var parent = document.getElementById('a'+num);
  var circle = document.getElementById('crcl');
  parent.appendChild(circle);
  /*and so on upto 9*/
  });
html,body{
  width:100%;height:100%;
  }

#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }

#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }
<div id="crcl"> </div> <button id="btn">move circle</button>

<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>