Append div to another div based on form selection

Question

I'm trying to move one div (selected through a form) into another div.

I'm having trouble figuring out how to store the location of the selected div into a reusable variable since it's apparently only declared locally.

The variable returns undefined every time, the div never moves and I get an uncaught error.

Is there an easy way to fix this code so it will work?

Thank you for your help!

var divsArr = [
	document.getElementById("div1"),
	document.getElementById("div2"),
	document.getElementById("div3"),
	document.getElementById("div4"),
	document.getElementById("div5"),
	document.getElementById("div6"),
	document.getElementById("div7"),
	document.getElementById("div8")
];

function identifyDiv() {
	var selectDiv = document.getElementById("exampleOptions").value;
	for (var i = 0; i < divsArr.length; i++) {
		var location = divsArr[i];
		if (selectDiv == divsArr[i].id) {
			break;
		}
	}
}

function moveDiv() {
	identifyDiv();
	alert(location.id); // debug
	location.appendChild(topDiv);
}

<div id="topDiv" style="width: 25px; height: 25px; background-color: orange">
</div>

<br/>

<div style="width: 200px; height: 100px; border-style: solid; border-width: 1px; border-color: black">
	<div id="div1" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div2" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div3" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div4" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div5" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div6" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div7" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div8" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
</div>

<br/>

<form style="width: 40px; float: left">
  <select id="exampleOptions" name="Numbers">
    <option id="example1" value="div1">1</option>
    <option id="example2" value="div2">2</option>
    <option id="example3" value="div3">3</option>
    <option id="example4" value="div4">4</option>
    <option id="example5" value="div5">5</option>
    <option id="example6" value="div6">6</option>
  	<option id="example7" value="div7">7</option>
		<option id="example8" value="div8">8</option>
	</select>
</form>

<button onclick="moveDiv()">Run Script
</button>

Answer 1

Ok so to keep things clean I thought using getElementsByClassName would be a good idea to "group" all the elements together. This still uses the array you wanted but cuts down the needed work as well as keeping things clean.

The class is set on each of the elements with the id's that you were trying to get.

From here it then checks the id and compares like you've set it to do. Finally it sets the selected variable to the selected element you want and then appends the topDiv to that

//Get all the divs in an array
var divsArr = document.getElementsByClassName("divGroup");
var selected;
//alert(divsArr.length);

function identifyDiv() {
  //Get value of the select div
  var selectDiv = document.getElementById("exampleOptions").value;

  //alert(selectDiv);

  for (var i = 0; i < divsArr.length; i++) {
    //var location = divsArr[i];
    if (selectDiv === divsArr[i].id) {
      selected = divsArr[i];
      break;
    }
  }
}

function moveDiv() {
  identifyDiv();

  var topDiv = document.getElementById("topDiv");

  alert(selected.id); // debug
  selected.appendChild(topDiv);
}

   
  <div id="topDiv" style="width: 25px; height: 25px; background-color: orange">

  </div>

  <br/>

  <div style="width: 200px; height: 100px; border-style: solid; border-width: 1px; border-color: black">
    <div id="div1" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div2" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div3" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div4" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div5" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div6" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div7" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div8" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
  </div>

  <br/>

  <form style="width: 40px; float: left">
    <select id="exampleOptions" name="Numbers">
			<option id="example1" value="div1">1</option>
			<option id="example2" value="div2">2</option>
			<option id="example3" value="div3">3</option>
			<option id="example4" value="div4">4</option>
			<option id="example5" value="div5">5</option>
			<option id="example6" value="div6">6</option>
			<option id="example7" value="div7">7</option>
			<option id="example8" value="div8">8</option>
		</select>
  </form>

  <button onclick="moveDiv()">Run Script
	</button>

  <script src="JS/hi.js"></script>