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