CODEWITHSUNDEEP
javascriptarrays
ui xb
ui xb

Reputation: 15

I can't get the index of a string in an array and remove it | javascript

I am new to Javascript and am making a memory game but i can't seem to get this code to work. What i am trying to do is choose a random element from my ids array and then remove it from that array but be able to use that value afterwards to assign it to an element in the cards array. What I came up with so far is this (updated):

const cards = document.querySelectorAll(".memory-card");

let ids = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6"];

function idHandler() {
    let rand = Math.floor(Math.random() * ids.length);
    let x = ids.splice(rand, 1)[0];
    cards[x].setAttribute("id", x);
}

cards.forEach(mapIds);

Since someone asked for the html elements:

<div class="memory-card" id="1">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="1">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="2">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="2">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="3">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="3">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="4">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="4">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="5">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="5">
    <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="6">
     <img src="../assets/turned.png" class="front-face">
</div>
<div class="memory-card" id="6">
     <img src="../assets/turned.png" class="front-face">
</div>

Upvotes: 1

Views: 164

Answers (3)

theonly1me
theonly1me

Reputation: 1248

I will help you understand your existing code and where you are going wrong with it:

You don't need to get ids.indexOf(rand) here, the reason is because Math.Random is going to generate a number between 0 and 1 and then you are multiplying it with ids.length. Which means, the value of Math.random() will start from 0 and may go upto ids.length. Because your array is 0 based too, you can directly use this value and pass it as a parameter into the function you will use in order to split the array.

    let rand = Math.floor(Math.random() * ids.length); 
    let x = ids.indexOf(rand.toString());

Array.prototype.pop( ) function always removes the last element of the array and returns it's value. That is the reason why you are always getting the last element.

    ids.pop(ids[x]);

What you can use instead is Array.prototype.splice(). What this function does, is it takes in 2 arguments - start index and end index, and it mutates the array, which means it will alter your original array. Also, it returns the value of the removed element in a new array.

I have added a snippet example of that below, you should run it and see the results, also it is a good idea to copy this code to your own IDE and try to debug it using console.log( ) to log values at every step and see what is happening to get a better understanding. Feel free to ask any queries in the comments below this question.

let ids = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6"];

function idHandler() {
    const rand = Math.floor(Math.random() * ids.length);
    const x = ids.splice(rand, 1)[0]; 
    //[0] in above line to return the removed element instead of an array 
    //containing the element
    console.log(x);
    console.log(ids);
}

idHandler();

Upvotes: 0

user2953241
user2953241

Reputation: 365

I think what you want is splice like so:

const cards = document.querySelectorAll(".memory-card");

let ids = ["1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6"];

function idHandler() {
    let rand = Math.floor(Math.random() * ids.length);
    let x = ids.indexOf(rand.toString());
    var removedIds = ids.splice(ids[x], 1);
    cards[x].setAttribute("id", removedIds[0]);
}

cards.forEach(mapIds);

The function splice() removes elements from an array at the given position and returns the elements as array.

More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Upvotes: 0

Coupe
Coupe

Reputation: 372

You are trying to access the array incorrectly,

function idHandler() {
    let rand = Math.floor(Math.random() * ids.length);
    let x = ids[rand]
    ids.splice(rand,1) // can use this to remove an index from array
    cards[rand].setAttribute("id", x); // values should already be strings as they are stored with "" marks
}

You can actually skip a step if you don't need to use the variable x again

function idHandler() {
    let rand = Math.floor(Math.random() * ids.length);
    cards[rand].setAttribute("id", ids[rand]); // values should already be strings as they are stored with "" marks
    ids.splice(rand,1) // can use this to remove an index from array
}

Upvotes: 2

Related Questions