点击HTML按钮修改文本失效，JavaScript代码排查求助

你的代码核心问题在于用const声明了状态变量clicked，const定义的变量是只读的，无法被重新赋值。第一次点击按钮触发toggle函数时，尝试执行clicked = true会直接抛出语法错误，导致后续修改按钮文本的代码根本没机会执行。

解决方法一：将const改为let #

let声明的变量支持重新赋值，能正常维护状态切换：

let clicked = false;
function toggle(){
    if(!clicked){
        clicked = true;
        document.getElementById("readbtn").innerHTML = "Not read";
    }
    else{
        clicked = false;
        document.getElementById("readbtn").innerHTML = "Read";
    }
}

解决方法二：移除全局状态变量，直接通过按钮文本判断状态 #

这种方式不需要额外维护全局变量，直接读取按钮当前的文本内容来判断状态，代码更简洁健壮：

function toggle(){
    const btn = document.getElementById("readbtn");
    btn.innerHTML = btn.innerHTML === "Read" ? "Not read" : "Read";
}

验证方式 #

打开浏览器开发者工具（F12）的Console面板，点击按钮就能看到原来的错误提示：Uncaught TypeError: Assignment to constant variable.，这就是导致功能失效的直接原因。

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