Can't assign innerText with child get call?

Question

I'm failing to understand the logical failure in my script. This is my CSS [in case some property is my problem, though I doubt it]:

#grid {
    position: relative;
    display: table-row;
    border-collapse: collapse;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}
#grid .flipper {
    position: relative;
    display: table-cell;
    border: 1px solid black;
    border-collapse: collapse;
    width: 175px;
    height: 50px;
    transition: 0.2s;
    transform-style: preserve-3d;
    background: #009CA7;
    text-align: center;
    font-family: monospace;
    font-size: 10pt;
    text-align: center;
}
#grid .flipper:hover {
    transform: rotateX(180deg);
}
#grid .frontside, .backside {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}
#grid .frontside {
    z-index: 2;
    transform: rotateX(0deg);
}
#grid .backside {
    transform: rotateX(180deg);
}

This is my HTML:

<div id="grid">
 <div class="flipper">
   <div class="frontside"></div>
   <div class="backside"></div>
 </div>
</div>

This is my JS:

var cells = document.getElementsByClassName("flipper")
var list = document.getElementsByClassName("cardtext");
for (var i = 0; i < list.length; i++)
    list[i].style.display = "none";
setInterval(function () {   var randText = Math.floor(Math.random()*list.length);
                            var randCell = Math.floor(Math.random()*cells.length);
                            cells[randCell].innerText = list[randText].innerText;
                            /*cells[randCell].getElementsByClassName("backside").innerText = list[randText].innerText;*/ },
            500);

I have a large number of these grid cells with empty frontside and backside div. These cells represent "cards" with a front and back, and I'm flipping them over the X axis. Everything about the flipping is working great when I hover on each cell. The problem is with the JS [I think].

I'm trying to insert text onto the back of a card randomly at 500 ms intervals so that when the card flips the backside may not have the same text anymore.

This is working perfectly with the JS as written. The innerText from the cardtext array is inserting properly into the correct flipper div. I can watch the text change text when this script runs live every 500 ms in one of the cells randomly. I step through it in the debugger and see it's doing what I expect on the backend too.

But the commented out line of JS is what I actually want to do and it's not behaving the same way. Logically it looks sound to me, so I'm obviously missing something. That line should be inserting the innerText from the same cardtext array into the child called backside of that same flipper index. In fact, when I watch the list[randText].innerText and cells[randCell].getElementsByClassName("backside").innerText variables in the debugger, it appears to assign the correct text, but the cells never display it.

If I don't try to use the child call, it works and wipes out all the HTML inside the flipper div, meaning both child elements. If I use the child call, nothing visible happens anywhere.

I can't see any different behavior using innerHTML instead. I'm using Chrome and Edge as my test browsers, if that helps. Neither are working.