如何检测按钮innerHTML内容，判断其显示Log in/Log out状态

首先看你原代码的几个问题：

• 误用了赋值运算符=，应该用严格相等运算符===做判断，否则会触发语法错误
• 判断逻辑方向错误：你要检测按钮是否显示“Log out”，但代码里在查找“Log in”的标签包裹内容，完全搞反了
• 直接用innerHTML.indexOf容易受HTML标签、空格或换行干扰，判断不够可靠

下面是几种可靠的解决方式：

方法1：使用textContent获取纯文本（推荐） #

textContent会直接提取按钮内的纯文本内容，忽略任何HTML标签，搭配trim()去除可能的首尾空格，判断更准确：

const logBtn = document.getElementById('userLogBtn');
if (logBtn.textContent.trim() === 'Log out') {
  // 这里写按钮显示"Log out"时的处理逻辑
}

方法2：修正原有innerHTML的判断逻辑 #

如果一定要用innerHTML，可以改成以下两种写法（注意修正运算符和判断逻辑）：

const logBtn = document.getElementById('userLogBtn');
// 方式1：用includes判断是否包含目标文本
if (logBtn.innerHTML.includes('Log out')) {
  // 处理逻辑
}

// 方式2：修正原有的indexOf判断逻辑
if (logBtn.innerHTML.indexOf('Log out') !== -1) {
  // 处理逻辑
}

方法3：利用按钮的data属性（最可靠） #

你的按钮自带data-wf-user-logout和data-wf-user-login属性，对应两种状态的预设文本。直接对比当前文本和预设的data值，能避免文本格式变化带来的问题：

const logBtn = document.getElementById('userLogBtn');
if (logBtn.textContent.trim() === logBtn.dataset.wfUserLogout) {
  // 按钮处于登出状态（显示"Log out"）
}

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