Question 54620 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to interchange an element between 2 arrays? – Javascript

I’ve been trying to use the splice() and indexOf() methods on javascript for the first time, but I don’t understand the parameters.

I’m trying to make a game. When you click a card, it goes up and goes to another array.
Here is the code, arrays and variables:


var statusc1 = 'down';
let upcards = [];
let downcards = [
    pcard1,
    pcard2,
    pcard3,
    pcard4,
    pcard5
];


pcard1.addEventListener('click', ()=> {
    if(statusc1 == 'down') {
        console.log('its down');
        pcard1.style.bottom = -10;
        statusc1 = 'up';

        upcards.push(downcards[0]);
        downcards.splice(downcards.indexOf(pcard1),1);
        console.log(upcards);
    } else {
        console.log('its up');
        pcard1.style.bottom = -60;
        statusc1 = 'down';

        downcards.push(upcards[0]);
        upcards.splice(downcards.indexOf(pcard1),1);
        console.log(downcards);
    }
})

When it changes array, then goes back to the original one, the element does go back to the initial array (In the last position) but the second array (upcards) also keeps it and for some reason, stores a 2nd card (pcard2).

I tried changing the parameters of the splice method, but I don’t understand them.

Tags:

3

Answers


  1. 0

    I agree with @Unmitigated – I am unclear as to what you are trying to do.

    However, here are some thoughts on your code.

    1. your array of cards (downcards) is an array of objects
      that isn’t good or bad – but it might make finding them harder
      by way of example: downcards.indexOf(pcard1) would not return 0 here.
      it would return -1.
      if pcard1, pcard2, etc have some sort of id or name, then you could search the array for an element matching that property; however, as it stands – what you’ve got would never get that specific card in the array.

    2. splice does two things – it changes the original array and it returns the removed item(s).
      so your syntax is good if your "indexOf" call worked as you expect.

    3. up until things are working, you might want to console.log both the upcards and the downcards for both scenarios;
      for the record, when your indexOf returns a -1, splice will always remove the last card in the list
      so you’re clicking "pcard1" but removing "pcard5" from your list
      but you’re also adding "pcard1" to upcards
      which means downcards would lose the card you’re not expecting
      and upcards would gain whatever was in the first position of downcards
      (which might not be pcard1)

    4. once everything is working, you could probably chain your push and splice, like this:
      upcards.push(downcards.splice(downcards.indexOf(pcard1),1));
      this takes the card that’s been removed and adds it to the upcards array.

    Not sure if any of this solves your root problem – but it should help you move forward.

    Login or Signup to reply.
  2. 0

    Try changing the upcards.splice(downcards.indexOf(pcard1),1); line inside the else block as below. So that the card will get removed from the second array & it will not get stored.

    upcards.splice(upcards.indexOf(pcard1),1);

    Login or Signup to reply.
  3. 0

    Honestly, as a player of card games, I don’t think you should move the cards between two arrays, that would likely change their order, making things confusing. While I recognize that this way it’s not a practice of using slice() any more, you may be better off with a single array tracking the selection status of cards:

    const cards = document.getElementsByTagName("button");
const selected = new Array(cards.length).fill(false);

function update() {
  let selection = "";
  for (let i = 0; i < cards.length; i++)
    if (selected[i]) {
      cards[i].classList.add("selected");
      if (selection !== "")
        selection += ", ";
      selection += cards[i].innerText;
    }
  else
    cards[i].classList.remove("selected");
  document.getElementById("selected").innerText =
    selection === "" ? "" : "Selected cards: " + selection;
}

function toggle(index) {
  selected[index] = !selected[index];
  update();
}
for (let i = 0; i < cards.length; i++)
  cards[i].onclick = () => toggle(i);
    button {
  position: relative;
  height: 70px;
}

.selected {
  top: -10px;
}
    <br>
<button>Card1</button>
<button>Card2</button>
<button>Card3</button>
<button>Card4</button>
<button>Card5</button>
<br>
<br>
<div id="selected"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search