JS函数elementSet执行后back()与forth()失效问题求助

核心错误原因 #

你在elementSet函数的if判断中错误使用了赋值运算符=，而非用于相等比较的==或===。每次调用elementSet时，会依次将obj.count强制赋值为1、2、3，最终固定为3，导致back()和forth()的触发条件被破坏：

• forth()的判断条件是obj.count < 3，count被固定为3后永远无法触发
• back()执行后count临时减少，但紧接着elementSet又会把count重置回3，看起来像是功能失效

修复后的代码 #

JavaScript 部分 #

var obj = {
    count: 1
}

function elementSet() {
    // 用===做严格相等比较，避免赋值错误
    if(obj.count === 1){
        document.getElementById("text").textContent = "graa 1";
    } else if(obj.count === 2){
        document.getElementById("text").textContent = "graa 2";
    } else if(obj.count === 3){
        document.getElementById("text").textContent = "graa 3";
    }
}

function back() {
    if(obj.count > 1) {   
        obj.count -= 1;
        document.getElementById("page_num").textContent = obj.count;     
        // 当count回到1时隐藏back按钮
        document.getElementById("back").style.display = obj.count === 1 ? "none" : "block";
        // 恢复显示forth按钮
        document.getElementById("forth").style.display = "block";
    }
}

function forth() {
    if(obj.count < 3) {
        obj.count += 1;
        document.getElementById("page_num").textContent = obj.count;
        // 当count到3时隐藏forth按钮
        document.getElementById("forth").style.display = obj.count === 3 ? "none" : "block";
        // 恢复显示back按钮
        document.getElementById("back").style.display = "block";
    }
}

// 页面加载时初始化内容和按钮状态
window.onload = function() {
    elementSet();
    document.getElementById("back").style.display = obj.count === 1 ? "none" : "block";
    document.getElementById("forth").style.display = obj.count === 3 ? "none" : "block";
}

HTML 部分（修复标签闭合错误） #

<!DOCTYPE html>
<html>
<head>
    <title>films</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body class="body">
    <div class="container external internal" id="content">
        <h2 id="text" class="text"> its the f</h2> 
        <div class="row">
            <button class="colx1" id="back" type="button" onclick="back(); elementSet();"><b>back</b></button>
            <button class="colx2" id="forth" type="button" onclick="forth(); elementSet();"><b>forth</b></button>
        </div>
        <div class="page_num"><b id="page_num">1</b></div>
    </div>
</body>
</html>

额外优化说明 #

1. 将elementSet中的多个独立if改为else if，减少不必要的条件判断
2. 优化按钮显示逻辑，让按钮状态与当前count值匹配（比如count为1时隐藏back按钮）
3. 增加页面加载初始化函数，确保初始状态正确

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