Javascript 该函数仅在单击两次时有效

说到编程，我是个新手，所以我确实有一些基本的问题。其中一个我无法真正解决的问题是：

我编写了一个javascript代码，只需单击按钮即可更改div的内容。它可以很好地工作，但只需第二次单击即可

按钮html：

 <li class="navli"><a class="navbutton" id="home" onclick="navClick(this.id)">Home</a></li>

---

这看起来像是一个异步故障。试着这样做：

var buttonId=“”；
var contentText=“”；
函数navClick（单击的\u id）
{
buttonId=单击的\u id；
changeContent（）；
}
函数changeContent（）{
获取（“./pages/”+buttonId+“.txt”）
.然后（功能（响应）{
返回response.text（）
})
.then（功能（数据）{
contentText=数据；
document.getElementById（“content”）.innerHTML=contentText；
})
}

innerHMTML需要在

中更新，然后

，否则它可能会在

获取

完成之前运行。我最好的猜测

var buttonId = "";
var contentText = "";

function navClick(clicked_id)
{
    buttonId = clicked_id;
    changeContent();
}

function changeContent(){
    fetch("./pages/"+buttonId+".txt")
    .then(function(response){
        return response.text()
        })
        .then(function(data){
            contentText = data;
        })
        document.getElementById("content").innerHTML = contentText;
}