未捕获的TypeError：无法调用null的方法'replaceChild'

Question

I've been trying to make this work for hours. None of the documentation or answers here have helped yet.

I'm trying to replace each item in the flippedCards array with an empty div.

Getting the parent works fine, it gives back a div element. The error is when asking for the child, it says it's null, or sometimes undefined.

There's only two items with the class of "flip".

I only want to use JS.

HTML

<div>
    <div class="flip">
        <div></div>
        <div></div>
    </div>
    <div class="flip">
        <div></div>
        <div></div>
    </div>
</div>

JS

var flippedCards = document.querySelectorAll('.flip');

var replaceCards = document.createElement("div");

while (flippedCards[0] && flippedCards[1]) {
flippedCards[0].parentElement.replaceChild(replaceCards, flippedCards[0])          
flippedCards[1].parentElement.replaceChild(replaceCards, flippedCards[1]);
}

Answer 1

Try this :

var flippedCards = document.querySelectorAll('.flip');
var replaceCards = document.createElement("div");

flippedCards[0].parentElement.replaceChild(replaceCards, flippedCards[0]);
replaceCards = document.createElement("div");       
flippedCards[1].parentElement.replaceChild(replaceCards, flippedCards[1]);

Answer 2

Someone answered it then they deleted their answer. Was a two piece mistake on my part. Was wrapped in a while loop to check if those values existed in the first place. Then I didn't make two replaceCards.