找不到null的innerHTML，css3轉換翻轉

我不斷收到這段代碼的錯誤。具體而言，它是一個未捕獲的typeerror，它說，一個id爲null，即使它不是。找不到null的innerHTML，css3轉換翻轉

 <!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);

來源

2014-12-19 Christopher Dharma

哪條線導致錯誤？ – 2014-12-19 01:40:50

那時的你運行你的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函數很慢。如果你不經意地使用它，你無緣無故地放慢你的程序。造成這種情況的一個原因是，引擎必須將參數解析爲一個完整的新程序

來源

2014-12-19 01:38:41 baao

非常感謝。我非常的業餘。我決定嘗試學習HTML和CSS，我只是在嘗試一些東西。謝謝。 – 2014-12-19 01:53:36

不客氣！ – baao 2014-12-19 01:53:54

找不到null的innerHTML，css3轉換翻轉

回答

相關問題