Question

我一直在为这段特殊代码收到错误。具体来说，它是一个未被捕获的类型错误，它表示id为null，即使它不是。

        <!DOCTYPE HTML>
        <html>
        <head>
             <title>Flip the card over </title>
             <link rel="stylesheet" type="text/css" href="cardFlipper.css">
             <script>
            var front = new Array("ante","anti","bi","circum","com","con","de","dis","equi","extra","inter","intra")
            var back = new Array("before","against","bi","around","together","together","down","away","equal","beyond","between","within")
            var placeholder = eval(0);
            var cardFront = document.getElementById("cFront").innerHTML
            var cardBack = document.getElementById("cBack").innerHTML
            function rightCard()
            {
            placeholder += 1
            cardFront = front[placeholder]
            cardBack = back[placeholder]
            }
            function leftCard()
            {
            placeholder -= 1
            cardFront = front[placeholder]
            cardBack = back[placeholder]
            }
            function flipCard(theCard)
            {
                if(theCard.className == 'front')
                        theCard.className='flipped';
                else
                        theCard.className='front';
            }

        </script>
    </head>
    <body>
        <div id=deck class="container">
                <div id="card" onClick="flipCard(this)">
                        <figure class="front" id="cFront">ante</figure>
                        <figure class="back" id="cBack">before</figure>
                </div>
        </div>
        <input type=button id=left value="<-----" onclick="leftCard()">
        <p class=tab></p>
        <input type=button id=right value="----->" onclick="rightCard()">


    </body>
    </html>

这就是CSS。我试图将图中的文字更改为有效的内容。

    .tab { margin-left: 40px; 
    }
    .container{ 
        width: 200px;
        height: 260px;
        position: relative;
        perspective: 800px;
        -webkit-perspective: 800px;
        margin: 0 auto 40px;
        border: 1px solid #CCC;
}
    #card {
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: transform 1s;
        -webkit-transition: -webkit-transform 1s;
}
#card figure {
        display: block;
        position: absolute;
        width: 100%;
        height:100%;
        color: white;
        font-size: 40px;
        margin: 0;
        text-align: center;
        line-height: 260px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}
#card .front{
        background: red;
}
#card .back {
        background: blue;
        -webkit-transform: rotateY(180deg );
}

#card.flipped {
        -webkit-transform: rotateY(180deg );
        transform: rotateY(180deg);

Answer 1

当你运行你的javascript时，没有加载DOM和元素

 var cardFront = document.getElementById("cFront").innerHTML
 var cardBack = document.getElementById("cBack").innerHTML

实际上没有设置，因此找不到。

将代码包装在

中

window.onload = function() {

        var front = new Array("ante","anti","bi","circum","com","con","de","dis","equi","extra","inter","intra")
        var back = new Array("before","against","bi","around","together","together","down","away","equal","beyond","between","within")
        var placeholder = eval(0);
        var cardFront = document.getElementById("cFront").innerHTML
        var cardBack = document.getElementById("cBack").innerHTML
        function rightCard()
        {
        placeholder += 1
        cardFront = front[placeholder]
        cardBack = back[placeholder]
        }
        function leftCard()
        {
        placeholder -= 1
        cardFront = front[placeholder]
        cardBack = back[placeholder]
        }
        function flipCard(theCard)
        {
            if(theCard.className == 'front')
                    theCard.className='flipped';
            else
                    theCard.className='front';
        }

}

然后它会起作用。

为了提高网页的加载速度，我建议您在结束</body>标记之前将javascript代码放在文件的末尾。

我没有看到您使用 eval（）的原因。评估功能很慢。如果您不必要地使用它，那么您无缘无故地放慢了程序的速度。其中一个原因是引擎必须将参数解析为一个完整的新程序

找不到innerHTML的null，css3过渡翻转

1 个答案: