根据表单选择将 div 附加到另一个 div

Question

我正在尝试将一个 div（通过表单选择）移动到另一个 div。

我无法弄清楚如何将所选 div 的位置存储到可重用变量中，因为它显然只是在本地声明的。

变量每次都返回 undefined，div 永远不会移动，我得到一个未捕获的错误。

是否有一种简单的方法可以修复此代码以使其正常工作？

感谢您的帮助！

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

好的，为了保持整洁，我认为使用getElementsByClassName 将所有元素“组合”在一起是一个好主意。这仍然使用您想要的数组，但减少了所需的工作并保持清洁。

在每个元素上都设置了类，并带有您尝试获取的 id。

然后它会从这里检查 id 并像您设置的那样进行比较。 最后，它将selected 变量设置为您想要的选定元素，然后将topDiv 附加到该元素

//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>

Answer 2

问题在于location 是在函数内部声明的，并且是该函数的本地函数。为了能够在您的代码中使用，您需要在外部声明它。我已经更改了变量名，因为location 已经是一个全局变量，可能会引起混淆。

var selectedDiv;

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++) {
    selectedDiv = divsArr[i];
    if (selectDiv == divsArr[i].id) {
      break;
    }
  }
}

function moveDiv() {
  identifyDiv();
  alert(window.selectedDiv.id); // debug
  selectedDiv.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>