Создать 2 подраздела дочернего Div и добавить уникальный идентификатор Dynami c в Appended Child Divs? - PullRequest
Новая
       54

Создать 2 подраздела дочернего Div и добавить уникальный идентификатор Dynami c в Appended Child Divs?

0 голосов
/ 08 апреля 2020

Я сейчас создаю игру в блэкджек и каждый раз, нажимая «хит», я запускаю эту функцию, которая добавляет div, представляющий карту, извлеченную из колоды.

Я могу установить идентификатор для div, но я хочу, чтобы каждый идентификатор увеличивался в значении ... Итак, div1, div2, div3. В настоящее время каждый div получает один и тот же идентификатор, который будет бесполезен при попытке добавить значения к каждой карточке.

Другая проблема, с которой я сталкиваюсь, - это попытка добавить еще 2 дочерних элемента (каждый с уникальными идентификаторами) к этому новому div "card", который я могу заполнить "мастью" и "значением" карты.

Вот моя функция на данный момент ... 

function hitMe() {

var playerCards = document.getElementById("playerCards");
let newCard = document.createElement("div");
newCard.textContent = "Hello";
playerCards.appendChild(newCard);
newCard.setAttribute("id", "id_Here");

}

Так что, как только я создам каждый карты, я хочу, чтобы слово «Hello» было заменено значением карты и мастью карт.

Значение карты и масть карт можно получить с помощью этого метода создания колоды / игрока 

var suits = ["&spades", "&hearts", "&diams", "&clubs"];
var values = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];

var deck = new Array();

function createDeck() {
deck = new Array();
  for (var i = 0; i < values.length; i++) {
    for (var x = 0; x < suits.length; x++) {
      var weight = parseInt(values[i]);
      if (values[i] == "J" || values[i] == "Q" || values[i] == "K") weight = 10;
      if (values[i] == "A") weight = 11;
      var card = { Value: values[i], Suit: suits[x], Weight: weight };
      deck.push(card);
    }
  }
}



var players = new Array();
function createPlayers(num) {
  players = new Array();
  for (var i = 1; i <= num; i++) {
    var hand = new Array();
    var player = { Name: "Player " + i, ID: i, Points: 0, Hand: hand };
    players.push(player);
  }
}

function deal() {
  for (var i = 0; i < 2; i++) {
    for (var x = 0; x < players.length; x++) {
      var card = deck.pop();
      players[x].Hand.push(card);
      renderCard(card, x);
      updatePoints();
    }
  }
  updateDeck();
}

Если бы у кого-то было бы более упрощенное решение для кода, перечисленного выше, и как go об этом, я был бы очень рад. Спасибо

Ответы [ 2 ]

0 голосов
/ 08 апреля 2020

Вам не нужно использовать createElement, просто используйте insertAdjacentHTML и шаблонные литералы : 

var id = 0;

function hitMe(card) {
  var playerCards = document.getElementById("playerCards");
  playerCards.insertAdjacentHTML('beforeend',
  `<div id='card${id}' class='card'>
     <div id='suit${id}' class='suit'>${card.Suit}</div>
     <div id='value${id}' class='value'>${card.Value}</div>
   </div>`);
  id++;
}
0 голосов
/ 08 апреля 2020

Вы можете использовать идентификатор предыдущего элемента в playerCards, чтобы определить текущий идентификатор. В качестве уникального идентификатора масти и стоимости вы можете использовать идентификатор карты.

Вот пример: 

function hitMe() {
  var playerCards = document.getElementById("playerCards")
  let newCard = document.createElement("div")
  newCard.innerText = "Hello"

  // Card ID
  let cardID
  if(playerCards.lastChild === null) { // create first id if no childs
    cardID = 'card1'
  } else {
    // take the id number of previous elem and increment by one
    let number = parseInt(playerCards.lastChild.id.substring(3,playerCards.lastChild.id.length))
    cardID = 'card' + (number + 1)
  }

  // suit and value id
  let valueDIV = document.createElement("div")
  let suitDIV = document.createElement("div")

  let valueID = cardID + '-value'
  let suitID = cardID + '-suit'

  // set some custom values
  valueDIV.innerText = "some number"
  suitDIV.innerText = "some suit"

  // set ids and append elems
  newCard.id = cardID
  valueDIV.id = valueID
  suitDIV.id = suitID

  newCard.appendChild(valueDIV)
  newCard.appendChild(suitDIV)
  playerCards.appendChild(newCard)
}
...