Я пытаюсь переместить один 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>
javascript html forms appendchild
0
Josh 13 Мар 2018 в 22:29

2 ответа

Лучший ответ

Хорошо, поэтому для чистоты я подумал, что использование getElementsByClassName было бы хорошей идеей для "группировки" всех элементов вместе. Это по-прежнему использует массив, который вы хотели, но сокращает необходимую работу, а также сохраняет чистоту.

Класс устанавливается для каждого элемента с идентификатором, который вы пытались получить.

Отсюда он затем проверяет идентификатор и сравнивает, как вы его установили. Наконец, он устанавливает переменную 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>
0
Daamiaan 13 Мар 2018 в 19:59

Проблема в том, что 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>
0
nicooga 13 Мар 2018 в 20:07

Похожие вопросы

30 Как отключить автозаполнение в браузере в тегах поля / ввода веб-формы?
30 JavaScript пост запрос как форма отправить
30 Как я могу узнать, какая радио-кнопка выбрана с помощью jQuery?
29 Как включить файл JavaScript в другой файл JavaScript?
14 Как переместить элемент в другой элемент?
3 Как удалить верхние делители, не вызывая подпрыгивания нижних делителей?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

4 как отобразить определенный элемент один раз в jsx с помощью карты?
2 Изменение поведения <input type= color> с одиночного щелчка на двойной щелчок
1 Как установить данную строку var в качестве имен столбцов и данных, используя DataTable в Javascript
2 Как получить только последнюю строку из ячеек в одном столбце
2 Удалите ненужные namekeys из ответа json
3 Как отправить данные между двумя разными портами в одном приложении
3 Как сопоставить определенные строки в массиве с помощью javascript?
2 Фавикон React.js не меняется
3 Какое условие должно быть применено к дочернему компоненту для условного рендеринга
2 Angular, как проверить, из какого компонента находится div
Все вопросы по теме javascript >

javascript

По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.

Подробнее про javascript...