Question

我无法理解脚本中的逻辑失败。这是我的CSS [如果有些属性是我的问题，虽然我对此表示怀疑]：

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

这是我的HTML：

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

这是我的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);

我有大量这些网格单元格，其中包含空frontside和backside div。这些单元格代表正面和背面的“卡片”，我将它们翻过X轴。当我悬停在每个细胞上时，关于翻转的一切都很有效。问题出在JS [我认为]。

我正试图以500毫秒的间隔随机插入卡背面，这样当卡片翻转时，背面可能不再有相同的文字了。

这与编写的JS完美配合。 innerText数组中的cardtext正确插入到正确的flipper div中。当这个脚本随机地在其中一个单元格中每500毫秒运行一次时，我可以观察文本更改文本。我在调试器中单步执行它，看到它在后端也正在做我期望的事情。

但JS注释掉的是我真正想做的事情，而且行为方式并不一样。从逻辑上讲，它对我来说听起来很合理，所以我显然错过了一些东西。该行应该将同一innerText数组中的cardtext插入到同一backside索引的flipper子项中。实际上，当我在调试器中查看list[randText].innerText和cells[randCell].getElementsByClassName("backside").innerText变量时，它似乎分配了正确的文本，但单元格从不显示它。

如果我不尝试使用子调用，它会工作并清除flipper div中的所有HTML，这意味着两个子元素。如果我使用子呼叫，任何地方都不会发生任何可见的事情。

我找不到使用innerHTML的任何不同行为。我正在使用Chrome和Edge作为我的测试浏览器，如果这有帮助的话。两者都没有工作。

无法使用子get调用分配innerText？

0 个答案: