JavaScript函数赋值引发Bad Assignment警告的优化方案咨询

现有代码的核心问题 #

1. 语法错误：thirdClick()里的secondClick() = firstClick()完全不符合JavaScript语法规则——赋值操作的左侧必须是可赋值的变量/属性，函数调用的返回值（这里secondClick()默认返回undefined）不能作为赋值目标，这就是你收到"Bad Assignment"警告的直接原因。同时if (secondClick())的判断永远为false，因为secondClick()没有返回有效布尔值，这个分支根本不会执行。
2. 重复绑定事件监听器：每次调用firstClick()、secondClick()都会给按钮新增一个click事件监听器。多次点击后，按钮会同时触发多个监听器，逻辑会越来越混乱，只是目前文本覆盖速度快，你没明显察觉到隐患。
3. 状态管理混乱：靠函数互相调用来切换文本状态，逻辑链模糊，后续要新增更多文本状态的话，代码会彻底失控，完全不具备可维护性。

这种做法规范吗？ #

完全不规范，既存在语法错误，又有事件绑定的潜在问题，同时状态管理逻辑混乱，属于典型的新手试错写法，必须重构。

更优实现方式 #

方案1：用状态变量跟踪切换状态 #

核心逻辑：给按钮绑定一次点击监听器，用变量记录当前文本状态，每次点击切换文本并反转状态。

const body = document.body;
const btn = document.querySelector('#btn');
// 提前获取元素，避免重复DOM查询
const h1 = document.querySelector('#h1');

// 标记当前显示的文本状态
let isShowingFirstText = true;

// 仅绑定一次点击事件
btn.addEventListener('click', () => {
    if (isShowingFirstText) {
        h1.innerText = 'I Am Injected Into This Page by JavaScript 😎, Click the Button Again and see 🌈';
    } else {
        h1.innerText = 'Am also injected into this page by JavaScript cool right 😏';
    }
    // 如果h1已在页面中，append可省略；若需每次移到body末尾则保留
    body.append(h1);
    // 反转状态，为下次点击做准备
    isShowingFirstText = !isShowingFirstText;
});

// 初始化显示第一句文本（可选，按需调整）
h1.innerText = 'I Am Injected Into This Page by JavaScript 😎, Click the Button Again and see 🌈';
body.append(h1);

方案2：数组存储多段文本，索引切换 #

如果后续要新增更多切换文本，用数组存储会更灵活：

const body = document.body;
const btn = document.querySelector('#btn');
const h1 = document.querySelector('#h1');

// 所有待切换的文本存入数组
const switchTexts = [
    'I Am Injected Into This Page by JavaScript 😎, Click the Button Again and see 🌈',
    'Am also injected into this page by JavaScript cool right 😏'
];
// 记录当前显示的文本索引
let currentTextIndex = 0;

btn.addEventListener('click', () => {
    h1.innerText = switchTexts[currentTextIndex];
    body.append(h1);
    // 索引递增，超出数组长度后回到初始位置
    currentTextIndex = (currentTextIndex + 1) % switchTexts.length;
});

// 初始化显示第一个文本
h1.innerText = switchTexts[currentTextIndex];
body.append(h1);

额外提示 #

• DOM查询是有性能开销的操作，不要每次点击都重复查询#h1，页面加载时查询一次即可。
• 如果#h1元素本来就在页面结构中，body.append(h1)可以省略；只有当你需要每次点击都把它移动到body末尾时，才保留这个操作。

内容的提问来源于stack exchange，提问作者Ibeh Arinze. C