Я не могу сравнить два элемента массива в Javscript

Question

Мне трудно понять, как точно сравнить два элемента в массиве. Вот 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;
}

Вот HTML-код, который использует javascript:

<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>

Всякий раз, когда я запускаю эту проверку в своем коде if(shuffleCards[i].innerHTML === (shuffleCards[0].innerHTML)), она всегда выполняется как истина. Я не уверен, как это точно сравнить.

Я в основном преобразовал список узлов в массив, а затем пытаюсь сравнить значение каждого элемента в этом списке.

Answer 1

сравнить с атрибутом класса

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

Answer 2

Ну, вы сравниваете innerHTML. Все они имеют пустой innerHTML. Конечно, оценка всегда будет верной.

Сравните, используя element.className или element.classList.contains("fa-diamond") или 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');
}

или

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');
}

или

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');
}