x.classList.toggle（）不能正常工作

Question

所以我有這個腳本是遵循無限動畫的計數器。每次交換完成後，計數器重置爲0。在第四行從底部我試圖調用一個x.classList.toggle（）來改變css當計數器擊中20.當我用一個alert（）函數替換classList.toggle它的工作，但沒有類'doton'被添加到'dot1'。我錯過了什麼？

http://jsfiddle.net/8TVn5/

window.onload = function() { 

var currentPercent = 0; 

var showPercent = window.setInterval(function() { 

    $('#dot1').on('animationiteration webkitAnimationIteration oanimationiteration  MSAnimationIteration', function (e) { 
    currentPercent= 0;}); 



    if (currentPercent < 100) { 
    currentPercent += 1; 
    } else { 
    currentPercent = 0; 
} 

    if (currentPercent == 20){document.getElementByID('dot1').classList.toggle('doton');} 
    document.getElementById('result').innerHTML = currentPercent; 
}, 200); 


}; 

Answer 1

I'T只是一個錯字：它應該是getElementById。

http://jsfiddle.net/8TVn5/1/

Answer 2

你爲什麼混合jQuery和正常的選擇？

window.onload = function() { 
    var currentPercent = 0, 
     dot1 = $('#dot1'); 
    var showPercent = window.setInterval(function() { 
     dot1.on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', 
      function (e) { 
       currentPercent= 0; 
      } 
     ); 

     if (currentPercent < 100) { 
      currentPercent += 1; 
     } else { 
      currentPercent = 0; 
     } 

     if (currentPercent === 20){ 
      dot1.toggleClass('doton'); 
     } 
     $('#result').html(currentPercent); 

    }, 200); 
};