Почему возникает ошибка типа “cannot read property style of null”?

document.onmousemove = function() { 
  // во-первых не   document.getElementsByTagName('body')[0] 
  // а document.body без индекса 
  // и во-вторых в этой стороке <img src="evernote.png" id="cat"/> пропустил закрывающую скобку  
  document.body.insertAdjacentHTML('beforeEnd', '<img src="evernote.png" id="cat"/>'); 
  var cat = document.getElementById('cat'); 
  cat.style.position = 'fixed'; 
 
  document.onmousemove = function(event) { 
    cat.style.left = event.clientX + 20 + 'px'; 
    cat.style.top = event.clientY + 20 + 'px'; 
  } 
}

/*обрати внимание что если у BODY не прописан heigth, то он по умолчанию равен нулю и ты мышку двигаешь не в body, а в html*/ 
 
// данным способом  ( document.onmousemove ) ты двигаешь мышкой по html 
//и этот пример не будет работать 
 
//  смотри пример три 
 
 document.body.onmousemove = function() { 
 
      document.body.insertAdjacentHTML('beforeEnd', '<img src="evernote.png" id="cat"/>'); 
      var cat = document.getElementById('cat'); 
      cat.style.position = 'fixed'; 
 
       document.body.onmousemove = function(event) { 
        cat.style.left = event.clientX + 20 + 'px'; 
        cat.style.top = event.clientY + 20 + 'px'; 
      } 
    }

html{ 
background:red; 
} 
 
body{ 
background:green; 
}

// В данном варианте, когда у body прописан height ты уже двигаешь мышкой в body 
 
 
document.body.onmousemove = function() { 
 
  document.body.insertAdjacentHTML('beforeEnd', '<img src="evernote.png" id="cat"/>'); 
  var cat = document.getElementById('cat'); 
  cat.style.position = 'fixed'; 
 
  document.body.onmousemove = function(event) { 
    cat.style.left = event.clientX + 20 + 'px'; 
    cat.style.top = event.clientY + 20 + 'px'; 
  } 
}

html, 
body { 
  width: 100%; 
  height: 100%; 
  background: red; 
} 
 
body { 
  background: green; 
}