个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 12:32:12 25 4
gpt4 key购买 nike

我不断收到这段特定代码的错误。具体来说，这是一个未捕获的类型错误，它表示 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);

最佳答案

当你运行你的 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';
        }

}

然后它会起作用。

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

我没有看到您使用 eval() 的原因。 eval 函数很慢。如果你在不必要的情况下使用它，你就会无缘无故地减慢你的程序。原因之一是引擎必须将参数解析为一个完整的新程序

关于javascript - 找不到 null 的 innerHTML，css3 过渡翻转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27558584/

25 4 0
文章推荐： java - 我的星号框程序无法正常工作
文章推荐： c++ - 从 vector 中的父基转换的模板化子 T 生成的虚假字符
文章推荐： java - 如何处理Spring Boot注释中的403禁止错误？
文章推荐： C++ 二维 vector 声明
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com