Bootstrap按钮点击切换文本失效问题求助

嘿，我一眼就看出你代码里的两个小问题啦，这也是新手常犯的错误，咱们一步步来修正：

问题根源 #

1. 错误的判断逻辑：你把获取到的DOM元素elem直接和字符串比较了——elem是整个按钮对象，不是按钮上显示的文本内容，所以这个条件永远不会成立，代码只会走到else分支，自然看不到文本变化。
2. 错误的文本修改方式：普通<button>标签的文本内容不是通过value属性控制的，value一般用于<input>这类表单输入元素，按钮的文本得用textContent或者innerHTML来读写。

修正后的代码 #

先给你最直接的修复版本，修改你的JS代码即可：

function myFunction() {
  var elem = document.getElementById("myButton1");
  // 先获取按钮的文本内容，加trim()是为了去掉可能的前后空格，避免判断出错
  const currentText = elem.textContent.trim();
  
  if (currentText === "Show User Information") {
    elem.textContent = "Display Only Users";
  } else {
    elem.textContent = "Show User Information";
  }
}

更健壮的优化方案（可选） #

如果以后按钮文本可能会修改，依赖文本内容判断状态就不太灵活了，咱们可以用HTML的data-*属性来存储按钮状态，这样代码更健壮：

修改后的HTML：

<button class="btn btn-primary" type="button" onclick="myFunction()" id="myButton1" data-state="show-info">Show User Information</button>

对应的JS：

function myFunction() {
  var elem = document.getElementById("myButton1");
  const currentState = elem.dataset.state;
  
  if (currentState === "show-info") {
    elem.textContent = "Display Only Users";
    elem.dataset.state = "display-users";
  } else {
    elem.textContent = "Show User Information";
    elem.dataset.state = "show-info";
  }
}

这种方式下，就算以后按钮的显示文本变了，只要维护data-state的状态值就行，不用修改判断逻辑里的字符串，扩展性更好。

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