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

Question

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

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

变量 returns 每次都未定义，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

问题是 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>

Answer 2

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

class 设置在每个具有您尝试获取的 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>

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

Append div to another div based on form selection

html

javascript

forms

appendchild