时间戳

首页 > 解决方案 > 功能仅在单击两次时有效

javascript - 功能仅在单击两次时有效

问题描述

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

我写了一个javascript代码来改变一个按钮点击的div的内容。它工作正常，但仅在第二次单击时。

按钮 html：

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

的JavaScript：

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;
}

标签： javascripthtml

解决方案

它看起来像一个异步事故。试试这样：

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;
    })
}

innerHMTML 需要在内部更新then，否则它可能会在fetch完成之前运行。我最好的猜测。

推荐阅读