Variável não acessível quando inicializada fora da função

Quando eu uso código como este, ele funciona bem:

function removeWarning() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "Invalid username";
}

No entanto, quando eu quero mover osystemStatus para ser uma variável global, não funciona:

var systemStatus = document.getElementById("system-status");

function removeWarning() {
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    systemStatus.innerHTML = "Invalid username";
}

O que eu devo estar fazendo aqui?

questionAnswers(7)

yourAnswerToTheQuestion