求助！测试代码到第二屏的时候出现

测试脚本在第一屏没有问题，到了第二屏以后heading和subheading 初始完以后就不会再done 

控制台会出现这样的提示 ：

Uncaught TypeError: Cannot read property 'getAttribute' of null

    at HTMLDivElement.screen.onclick (text.js:28)

<div class="screen-2">

<div class="screen-2__wrap">

<div class="screen-2__wrap__bgi-3"></div>

<div class="screen-2__wrap__bgi-2"></div>

<div class="screen-2__wrap__bgi-1"></div>

<h2 class="screen-2__wrap__heading">每门课都是真实商业案例</h2>

<h4 class="screen-2__wrap__subheading">真实案例，真实场景，在实战中实践、操作、调试<br/>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</div>

</h4>

</div>

.screen-2{

background-color: #f3f5f7;

}

.screen-2__wrap{

width: 1200px;

height: 640px;

margin: 0 auto;

position: relative;

/*background-image: url(../img/sc2-1.png),url(../img/sc2-2.png),url(../img/sc2.png);

background-position:  center bottom,61% 77%, center bottom;

background-repeat: no-repeat;*/

}

/*三张背景图片*/

.screen-2__wrap__bgi-1{

width: 275px;

height: 380px;

position: absolute;

bottom:0;

left: 50%;

margin-left: -137px;

background: url(../img/sc2-1.png) center bottom no-repeat;

}

.screen-2__wrap__bgi-2{

width: 266px;

height: 205px;

position: absolute;

top: 336px;

left: 568px;

background: url(../img/sc2-2.png) no-repeat;

}

.screen-2__wrap__bgi-3{

width: 750px;

height: 361px;

position: absolute;

bottom:0;

left: 50%;

margin-left: -375px;

background: url(../img/sc2.png) no-repeat;

}

.screen-2__wrap__heading{

font-size: 40px;

font-weight: bold;

color: #07111b;

text-align: center;

padding-top: 88px;

position: relative;

}

.screen-2__wrap__heading::after{

content: " ";

display: block;

width: 50px;

height: 3px;

background-color: #f00;

position: absolute;

left: 50%;

bottom: -35px;

margin-left: -25px;

}

.screen-2__wrap__subheading{

font-size: 14px;

line-height: 20px;

color: #07111b;

text-align: center;

padding-top: 62px;

}

/* animation*/

/*第二屏动画元素*/

.screen-2__wrap__heading{

transition: all 1s;

}

.screen-2__wrap__heading_animation_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-2__wrap__heading_animation_done{

opacity: 1;

transform: translate(0,0);

}

.screen-2__wrap__subheading{

transition: all 1s;

}

.screen-2__wrap__subheading_animation_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-2__wrap__subheading_animation_done{

opacity: 1;

transform: translate(0,0);

}

.screen-2__wrap__bgi-1{

transition: all 1s;

}

.screen-2__wrap__bgi-1_animation_init{

opacity: 0;

}

.screen-2__wrap__bgi-1_animation_done{

opacity: 1;

}

.screen-2__wrap__bgi-2{

transition: all 1s;

}

.screen-2__wrap__bgi-2_animation_init{

opacity: 0;

transform: translate(0,100%);

}

@-webkit-keyframe kick-back{

0%{transform: translate(0,100%);}

80%{transform: translate(0,0);}

90%{transform: translate(0,10%);}

100%{transform: translate(0,0);}

}

.screen-2__wrap__bgi-2_animation_done{

opacity: 1;

animation-name: kick-back; 

}

var screenAnimationElements = {

".screen-1" : [

".screen-1__heading",

".screen-1__subheading"

],

".screen-2" : [

".screen-2__wrap__heading",

".screen-2__wrap__subheading",

".screen-2__wrap__bg-1",

".screen-2__wrap__bg-2"

]

}

// 设置当前屏的动画

function setScreenAnimation(screenCls) {

var screen = document.querySelector(screenCls);  //获取当前屏元素

var animationElements = screenAnimationElements[screenCls]; //获取当前屏的动画元素

var isSetAnimationInit = false; //是否完成了动画元素的初始化？ 没有

var isSetAnimationDone = false; //动画元素是否已经DONE了？ 没有

screen.onclick = function () {

//初始化样式，增加init

if (isSetAnimationInit === false) {

//将动画元素拿出来一一给他们添加init

for (var i = 0; i < animationElements.length; i++) {

var element = document.querySelector(animationElements[i]);

var baseCls = element.getAttribute("class");

element.setAttribute("class",baseCls + " " + animationElements[i].substr(1) + "_animation_init");

}

isSetAnimationInit = true;

return;

}

//init 变done

if (isSetAnimationDone === false) {

for (var i = 0; i < animationElements.length; i++) {

var element = document.querySelector(animationElements[i]);

var baseCls = element.getAttribute("class");

element.setAttribute("class",baseCls.replace('_animation_init','_animation_done'));

}

isSetAnimationDone = true;

return;  

}

// done 变init

if (isSetAnimationDone === true) {

for (var i = 0; i < animationElements.length; i++) {

var element = document.querySelector(animationElements[i]);

var baseCls = element.getAttribute("class");

element.setAttribute("class",baseCls.replace('_animation_done','_animation_init'));

}

isSetAnimationDone = false;

return;

}

}

}

for(k in screenAnimationElements){

setScreenAnimation(k);

}