Помогите разобраться что и за чем делать. Итак, у меня есть два массива (один с данными, другой пустой):
let PC_Hand = [a, b, c];
let PC_Avant_Grade = new Array();
Есть HTML-елементы, которые отображают содержимое этих массивов:
const PCHand = document.querySelectorAll('.comp-card-hand');
const PCAG = document.querySelectorAll('.comp-card-avantgrade');
function Print_Hand(arr, div) {
for (var i = 0; i < arr.length; i++) {
while (div[i].firstChild) {
div[i].removeChild(div[i].firstChild);
};
div[i].appendChild(arr[i].getHTML());
}
};
Print_Hand(PC_Hand, PCHand);
Print_Hand(PC_Avant_Grade, PCAG);
Данные из массива выводятся в указанный элемент HTML-документа, путем создания в нем дочернего div-элемента.
Итак, что мне нужно: я хочу переместить элемент PC_Hand[i] на позицию PC_Avant_Grade[y] через клик мыши по дочернему элементу PCHand[i] и элементу PCAG[y].
Я пробовал сделать нечто вроде этого:
// обьявил глобальные переменные для запоминания значения и номера элемента массива, который нужно переместить
let index = 0;
let k = new Cards();
//Сделал проверну на наличие дочерних элементов и если они есть, то дал им функцию, которую нужно выполнить при клике.
if (PCHand.hasChildNodes()) {
var children = PCHand.childNodes;
var i = 0;
// вот у меня проблема: как выйти из ребенка на номер элемента родителя?
children[i].onclick = function() {
k = PC_Hand[i]; // запоминаю значение массива по номеру
delete PC_Hand[i]; // удалю значение из массива.
}
}
};
// далее опять функция клика, которая должна определить номер элемента массива по клику по соответствующему диву и записать туда запомненное значение k.
PCAG[index].onclick = function() {
PC_Avant_Grade[index] = k;
Print_Hand(PC_Rearguard, PCRG);
}
Я понимаю, что в последнем фрагменте кода скорее всего полный бред, однако самостоятельно понять, что не так, у меня не получается. Думаю, возможно, стоит использовать TargetListener, однако понятия не имею, как его сюда запихнуть...
Cards
выглядит так:
class Cards {
constructor(suits, attak, attaktipe, accuracy, health, defence, speed, dexterity) {
this.suits = suits;
this.attak = attak;
this.attaktipe = attaktipe;
this.accuracy = accuracy;
this.health = health;
this.defence = defence;
this.speed = speed;
this.dexterity = dexterity;
};
getHTML() {
const CardDIV = document.createElement('div');
CardDIV.innerText = this.suits;
CardDIV.classList.add("card");
CardDIV.dataset.value = `${this.attak} ${this.defence} ${this.speed} ${this.health}`;
return CardDIV;
};
};
Код изначального HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, instant-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/battle.css">
<title>Card game</title>
<script src="./js/menu.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="battle">
<div class="comp-card-hand card-slot">Hand 1</div>
<div class="comp-card-hand card-slot">Hand 2</div>
<div class="comp-card-hand card-slot">Hand 3</div>
<div class=""></div>
<div class="comp-card-avantgrade card-slot">line 1-1</div>
<div class="comp-card-avantgrade card-slot">line 1-2</div>
<div class="comp-card-avantgrade card-slot">line 1-3</div>
<div class="text-2"><button id="hider" onclick="Start()"> Start </button> <button id="hider2" onclick=""> Next </button></div>
<div class="player-card-hand card-slot">hand 1</div>
<div class="player-card-hand card-slot">hand 2</div>
<div class="player-card-hand card-slot">hand 3</div>
<div class=""></div>
<div class="player-card-avantgrade card-slot">avant-garde 1</div>
<div class="player-card-avantgrade card-slot">avant-garde 2</div>
<div class="player-card-avantgrade card-slot">avant-garde 3</div>
<div class=""></div>
</div>
<script src="./js/battle.js"></script>
</div><!-- Battle -->
</body>
</html>
Вот еще скрин того, как это отображается в браузере (может это поможет понять, что я хочу сделать):
- Это изначальное состояние:
- А это состояние с заполненным массивом
PC_Hand
:
И вот я хочу кликом мышки выбрать, например (красные), элемент militia
в hand1
и переместить его в элемент line 1-3
, то есть переместить значение элемента PC_Hand[1]
в элемент PC_Avant_Grade[3]
. Ключевой момент состоит в том, что я хочу не просто переместить созданный div
от одного родителя к другому, а именно переписать значения из одного массива в другой, при этом кликая мышкой по соответствующим div
элементам.
parentNode
получить родителя. Не понятно, что означает "номер элемента родителя". Родитель может быть только одинy
дляPC_Avant_Grade[y]
иPCAG[y]
если изначально элементов вPCAG
может не быть?Cards
?