初级JavaScript-HTML页面不显示初始值

我或多或少是JavaScript的新手，我将尝试一个非常基本的Hangman版本来让我继续前进。

当用户第一次进入页面时，我开始尝试显示一些生命，这将随着他们选择的每个不在单词中的字母而减少。

我在外部文件中的JavaScript如下：

var lives = 5;
//Display the number of lives the user has remaining
var showLives = function(){
    document.getElementById("livesLeft").innerHTML = lives;
}
//Will decrease lives each time incorrect letter is chosen
function decrementLives(){
    lives--;
    showLives();
}

问题是，当我最初加载HTML页面时，没有显示剩余生命数的值，我希望它是5。

当我点击身体上的任何地方时（目前为了测试目的，硬编码为调用reditionLives（）），它的工作方式正是我想要的。每次点击显示4、3、n-1。

任何关于为什么第一个没有像我预期的那样最初显示为5的想法。我一直在想，这可能与生活变量范围有关？