CODEWITHSUNDEEP
javascriptarraysloopsobjectfor-loop
Christopher Caldwell
Christopher Caldwell

Reputation: 305

How to assign DOM created objects unique identifiers?

This is my first question, so apologies if it's not specific enough or critical details are lacking.

I'm learning JS through tutorials and applying it to building what equates to a deck builder.

A bunch of cards show up, you choose one and it's added to the deck. Those cards are turned into objects and added to an array that represents the cards chosen to be in the deck

My issue arrises when multiple of the same cards are put into a deck, and you want to remove just one of them. I cannot target just the one because all my comparison operators pick up both instances.

Here is my repo on Github in case it wasn't explained well enough: https://github.com/caldwell619/armada-fleet/tree/data-attr

Specifically, here are the snippets I'm struggling with:

Removal of a ship from the array chosenFleet.ships:

for (var i = 0; i < chosenFleet.ships.length; i++) {
    if ($(this).data("name") === chosenFleet.ships[i].name) {
        chosenFleet.ships.splice(i, 1);

I tried applying a unique identifier to all of the objects, but since my function is based off rewritting the HTML,

 pickedShips.innerHTML = "";
            for (let ship of chosenFleet.ships) {
                // div creation
                const shipSel = shipSelect(ship);
                pickedShips.appendChild(shipSel);

All of the unique identifiers end up being the same because every time the event listener fires, HTML elements are rewritten based on the current state of the array ships.

Function that creates the HTML based on which ship is selected:

const shipSelect = (ship) => {
const selectedShipContainer = document.createElement("div");
const shipImgContainer = document.createElement("div");
const shipNameContainer = document.createElement("div");
const shipImg = document.createElement("img");
const shipName = document.createElement("p");
const upgradeBar = document.createElement("div");
const deleteElement = document.createElement("span");
shipImgContainer.className = "span-4-of-12 ship-img";
shipImgContainer.appendChild(shipImg);
shipImg.src = "images/cards/ship/empire/" + ship.imageName;
selectedShipContainer.appendChild(shipImgContainer);
selectedShipContainer.className = "selected-ship-container";
upgradeBar.setAttribute("data-name", ship.name);
//add selected ship to new div
shipNameContainer.className = "span-7-of-12 ship-name";
shipNameContainer.appendChild(shipName);
shipNameContainer.appendChild(deleteElement);
deleteElement.className = "delete ion-trash-a";
deleteElement.setAttribute("data-name", ship.name);
deleteElement.setAttribute("data-points", ship.points);
//using data to make DOM manipulation
selectedShipContainer.setAttribute("data-name", ship.name);

shipName.innerHTML = ship.name;
selectedShipContainer.appendChild(shipNameContainer);
upgradeBar.className = "upgrade-bar";
selectedShipContainer.appendChild(upgradeBar);
const specificUpgrades = Object.keys(ship.upgrades);
for (let up of specificUpgrades) {
    const butt = upgradeButtonMake(up);
    upgradeBar.appendChild(butt);
}
pickedShips.appendChild(selectedShipContainer);
// return throwaway;
return selectedShipContainer;

};

Again, if this is too long / too short / etc, my apologies. Noob here.

Upvotes: 0

Views: 40

Answers (2)

Brain Ops
Brain Ops

Reputation: 31

You may create more specific sheep identity e.g something like

deleteElement.setAttribute("data-id", ship.name + ship.type);

type is whatever attribute that better specifies your ship.

and then compare on this attr

if ($(this).data("id") === chosenFleet.ships[i].name + chosenFleet.ships[i].type) {

Upvotes: 2

Dominique Fortin
Dominique Fortin

Reputation: 2238

Create a global object like

(function (global) {
  global.getUniq = getUniq;
  var id = 0;

  function getUniq() {
    return ++id;
  }
})(window);

It's a singleton and each time you call getUniq you get a unique identifier no matter how many clients use it.

Upvotes: 0

Related Questions