CODEWITHSUNDEEP
javascriptarrayscompare
Aditya Gorti
Aditya Gorti

Reputation: 83

I'm unable to compare two array items in Javascript

I'm having a hard time figuring how to accurately compare two items in an array. Here is the javascript:

const listCards = document.querySelectorAll('.fa');
cardArray = Array.from(listCards);
let shuffleCards  = shuffle(cardArray.slice(3,cardArray.length-1));

document.querySelectorAll('.fa').forEach(function(cv){cv.remove(), this});



/*
 * Display the cards on the page
 *   - shuffle the list of cards using the provided "shuffle" method below
 *   - loop through each card and create its HTML
 *   - add each card's HTML to the page
 */
const listAddCard = document.querySelectorAll('.card');

for(i=0; i<listAddCard.length; i++){

    listAddCard.item(i).appendChild(shuffleCards[i]);
    if(i>0){
        if(shuffleCards[i].innerHTML === (shuffleCards[0].innerHTML)){
            console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
            listAddCard.item(i).classList.add('match');


        }
    }
    else listAddCard.item(i).classList.add('match'); 
}

// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

Here is the HTML that the javascript is sourcing:

<ul class="deck">
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
            <li class="card">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card open show">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>

        </ul>

Whenever I run this check in my code if(shuffleCards[i].innerHTML === (shuffleCards[0].innerHTML)), it always runs true. I'm not sure how to compare it accurately.

I basically converted a node list into an array and then I'm trying to compare the value of each item in that list.

Upvotes: 0

Views: 89

Answers (2)

Gabriel Lopez
Gabriel Lopez

Reputation: 452

compare with the class attribute

if (shuffleCards[i].classList.value === (shuffleCards[0].classList.value)) {

Upvotes: 1

Potato Salad
Potato Salad

Reputation: 4650

Well you're comparing innerHTML. All of these have empty innerHTML. Of course the evaluation will always be true.

Compare using element.className or element.classList.contains("fa-diamond") or elements[i].classList.contains(elements[0].className).

if(shuffleCards[i].className == shuffleCards[0].className){
  console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
  listAddCard.item(i).classList.add('match');
}

or

if(shuffleCards[i].classList.contains(shuffleCards[0].className)){
  console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
  listAddCard.item(i).classList.add('match');
}

or

if(shuffleCards[i].classList.contains('fa-diamond')){
  console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
  listAddCard.item(i).classList.add('match');
}

Upvotes: 0

Related Questions