点击按钮后文本变为[object Promise]，如何阻止该现象？

问题根源 #

你错误地将fetch返回的Promise对象直接赋值给了按钮的innerHTML属性，浏览器会把Promise对象转换为字符串[object Promise]，导致按钮原有文本被替换。

修正后的JS代码 #

function drikkeClick() {
    // 移除对按钮innerHTML的错误赋值，单独执行fetch逻辑
    fetch("drikker.json")
        .then(function(response){
            return response.json();
        })
        .then(function(drikker){
            let placeholder = document.querySelector("#data-output");
            let out = "";
            for(let product of drikker){
                out += `
                    <tr>
                        <td> <img src='${product.image}'> </td>
                        <td>${product.name}</td>
                        <td>${product.price}</td>
                    </tr>
                `;
            }
        
            placeholder.innerHTML = out;
        });
    // 无需修改按钮innerHTML，保留原有文本和样式
}

关键说明 #

• 原代码中document.getElementById("drikker-btn").innerHTML = fetch(...)是核心错误：fetch返回的是异步Promise对象，不能直接作为HTML内容赋值。
• 只需单独执行fetch请求并处理表格渲染逻辑，不要将fetch的返回值与按钮的innerHTML关联，按钮就会维持原有状态。

内容的提问来源于stack exchange，提问作者Therese