TypeError: Cannot read property 'innerHTML of null

Question

here i got stucked this error when i check the correctValue is equal to the document.getElementById('box'+j).innerHTML the interpreter see the second one as undefined but when i changed document.getElementById('box'+j).innerHTML with this.innerHTML it work.just i didnt understand why it doesnt work with document.getElementById('box'+j).innerHTML.for the this.innerHTML it refer to the current element this i know it.here is my code below Thank you in advance

//if i click on the answer box
    for(j=1;j<5;j++){
      //here i check every box if checked
      document.getElementById('box'+j).onclick=function(){
        //check if im playing
        if(playing==true){
          //if the inner Html of the current box is equal to the correct value
            if(document.getElementById('box'+j).innerHTML==correctValue){
              //we add 1 to the score
            score+=1;
              //we edit the scorevalue span with the new value of score
            editElement('scoreValue',score);
              //we hide the wrong div
            hide('wrong');
              //show the correect div
            show('correct');
              //set time out of 1 second and after that we hide the correct div 
            setTimeout(function(){ hide('correct'); }, 1000);
              //generate new question and answer
            generateQA();
          }else{//if the values are not equal 
            // hide the correct div 
            hide('correct');
            //show the wrong div
            show('wrong');
            //set a time out of 1 second and after that i show the wrong div
            setTimeout(function(){ hide('wrong'); }, 1000);
          }
        }
      };
    }