Проблема с проверкой нулевого массива Js

'use strict';

var quizcardContainer = document.querySelector('.quizcard');
var allCards = document.querySelectorAll('.flip-card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');
var next = document.getElementById('next');
var quizcardbuttons = document.querySelectorAll('quizcard--buttons');
var arrow = document.getElementsByClassName('arrownext');


function initCards(card, index) {
  var newCards = document.querySelectorAll('.flip-card:not(.removed)');

  newCards.forEach(function (card, index) {
    card.style.zIndex = allCards.length - index;
    card.style.opacity = (10 - index) / 10;
  });
  
  quizcardContainer.classList.add('loaded');
}

initCards();

function createButtonListener(love) {
  return function (event) {
    var cards = document.querySelectorAll('.flip-card:not(.removed)');
    var next = document.querySelectorAll('.next:not(.removed)');

    if (!cards.length) document.getElementsByClassName('arrownext')[0].classList.remove('invisible');

    var card = cards[0];
    var nextbutton = next[0];

    card.classList.add('removed');
    nextbutton.classList.add('removed');

    if (love) {
      card.style.zIndex = 1000000000000000000;
      card.style.transform = 'translate(100vw, -100px) rotate(-30deg)';
      cards[1].classList.remove('hidden');
    } else {
      card.classList.toggle('do-flip');
      card.style.zIndex = 1000000000000000000;
        document.getElementById('nope').style.visibility = 'hidden';
        document.getElementById('love').style.visibility = 'hidden';

      nextbutton.onclick = function() {
        card.style.zIndex = 1000000000000000000;
        card.style.transform = 'translate(-100vw, -100px) rotate(30deg) rotateY(-180deg)';
        cards[1].classList.remove('hidden');
        document.getElementById('nope').style.visibility = 'visible';
          document.getElementById('love').style.visibility = 'visible';
          if (!cards.length) document.getElementsByClassName('arrownext')[0].classList.remove('invisible');
  };

    }
    
    initCards();
    event.preventDefault();
  };
}



var nopeListener = createButtonListener(false);
var loveListener = createButtonListener(true);

nope.addEventListener('click', nopeListener);
love.addEventListener('click', loveListener);

.invisible {
  display: none;
}

.quizcard {
  height: 525px;
  width: 850px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -moz-transform: perspective(1800px);
  -webkit-perspective: 1800px;
  perspective: 1800px;
  background: transparent;
  right: 0;
  position: absolute;
}

.loaded.quizcard {
  opacity: 1;
}

.quizcard--cards {
  -webkit-box-flex: 1;
  flex-grow: 2;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  z-index: 1;
}

.quizcard--buttons {
  -webkit-box-flex: 0;
  text-align: center;
  padding-top: 20px;
}

.flip-card {
  display: inline-block;
  width: 900px;
  text-align: center;
  margin: 50px auto;
  position: absolute;
  -o-transition: transform 0.5s ease-out, opacity 0.2s ease-out;
  -webkit-transition: transform 0.5s ease-out, opacity 0.2s ease-out;
  -ms-transition: transform 0.5s ease-out, opacity 0.2s ease-out;
  transition: transform 0.5s ease-out, opacity 0.2s ease-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  right: 0;
}

.dont-flip {
  -o-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip-card .flip-card-front, .flip-card-back {
  width: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  background: transparent;
  color: #000;
  padding: 20px 40px;
}

.flip-card .flip-card-front {
  border-radius: 7px;
}

.flip-card .flip-card-back {
  -o-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  height: 100%;
}

.card::after, .card::before {
  position: absolute;
  content: "";
  transition: all 0.5s;
}

.card {
  display: inline-block;
  padding: 20px 40px;
  color: #000;
  position: absolute;
  text-decoration: none;
  font-size: 0.4rem;
  transition: all 0.5s;
  background: #fff;
  cursor: pointer;
  width: 670px;
  height: 320px;
  right: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.face_text {
  font-size: 1.5rem;
  font-family: "Roboto", "Arial", sans-serif;
}

.back_text {
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.middle p:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0.1;
  position: absolute;
  top: 0;
}

.button:hover {
  background: #FF882A;
  color: #FFF;
  box-shadow: none;
}

.button {
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  border: 1px solid #FF882A;
  background: white;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 500px;
  text-align: center;
  letter-spacing: 1px;
  bottom: -7px;
  transition: 0.3s ease-in-out;
  padding: 7px;
  cursor: pointer;
}

.nope {
  background: red;
}

.yes {
  background: green;
}

.hidden {
  display: none;
}

.arrownext {
  position: absolute;
  z-index: 5;
  border-radius: 3px;
  background: blue;
  color: white;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 100px;
  text-align: center;
  letter-spacing: 1px;
  bottom: -7px;
  transition: 0.3s ease-in-out;
  padding: 7px;
  cursor: pointer;
  bottom: 50px;
  right: 50px;
}

.button__select::after, .button__select::before {
  position: absolute;
  content: "";
  transition: all 0.5s;
}

.button__select {
  display: inline-block;
  padding: 10px 30px;
  color: #FFF;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.5s;
  background: #FF882A;
  cursor: pointer;
  border: none;
  height: 49px;
  width: 162px;
  margin-left: 70px;
}
.button__select::before {
  bottom: -5px;
  height: 5px;
  width: 162px;
  left: 5px;
  background: #FFF;
}
.button__select::after {
  right: -5px;
  height: 100%;
  width: 5px;
  bottom: -5px;
  background: #FFF;
}
.button__select:active {
  margin-left: 10px;
  margin-top: 10px;
}
.button__select:active::before {
  bottom: -5px;
  height: 5px;
  left: 3px;
}
.button__select:active::after {
  right: -5px;
  width: 5px;
  bottom: -3px;
}

.button__next::after, .button__next::before {
  position: absolute;
  content: "";
  transition: all 0.5s;
}

.button__next {
  display: inline-block;
  padding: 10px 30px;
  color: #FF882A;
  vertical-align: middle;
  text-decoration: none;
  transition: all 0.5s;
  background: #FFF;
  cursor: pointer;
  border: none;
  height: 38px;
  width: 135px;
  position: absolute;
  right: 15px;
  bottom: 15px;
  border: 2px solid #FF882A;
  font-size: 1rem;

}
.button__next::before {
  bottom: -5px;
  height: 5px;
  width: 130px;
  left: 2px;
  background: #FF882A;
}
.button__next::after {
  right: -5px;
  height: 100%;
  width: 5px;
  bottom: -5px;
  background: #FF882A;
}
.button__next:active {
  margin-left: 10px;
  margin-top: 10px;
}
.button__next:active::before {
  bottom: -5px;
  height: 5px;
  left: 3px;
}
.button__next:active::after {
  right: -5px;
  width: 5px;
  bottom: -3px;
}

 <div class="quizcard">
  <div class="quizcard--cards">
    <div class="flip-card">
      <div class="flip-card-front">
        <div class="card">
            <div class="middle">
              <p class="face_text">Вопрос</p>
            </div>
        </div>
      </div>
    <div class="flip-card-back">
      <div class="card">
        <div class="inner">
          <div class="middle">
            <p class="back_text">Ответ</p>
          </div>
          <button class="button__next next">Далее</button>
        </div>
      </div>
    </div>
  </div>
    <div class="flip-card hidden">
      <div class="flip-card-front">
        <div class="card">
          <div class="inner">
            <div class="middle">
              <p class="face_text">Вопрос</p>
            </div>
          </div>
        </div>
      </div>
    <div class="flip-card-back">
      <div class="card">
        <div class="inner">
          <div class="middle">
            <p class="back_text"Ответ</p>
          </div>
          <button class="button__next next">Далее</button></div>
      </div>
    </div>
  </div>
    <div class="flip-card hidden">
      <div class="flip-card-front">
        <div class="card">
          <div class="inner">
            <div class="middle">
              <p class="face_text">Вопрос</p>
            </div>
          </div>
        </div>
      </div>
    <div class="flip-card-back">
      <div class="card">
        <div class="inner">
          <div class="middle">
            <p class="back_text">Ответ</p>
          </div>
          <button class="button__next next">Далее</button></div>
      </div>
    </div>
  </div>
    <div class="quizcard--buttons">
    <button class="nope button__select" id="nope">Не согласен</button>
    <button class="yes button__select"  id="love">Согласен</button>
  </div>