如何根据按钮点击的切换状态渲染不同文本，实现文案来回切换？

核心逻辑通过状态判断实现双向切换即可，不需要额外引入复杂依赖，以下是可直接复用的修改后代码：

修改后的JavaScript代码 #

function change() {
  const btn = document.getElementById("myBtnToReportABug");
  // 请将下方id替换为你实际的下拉文本输入框元素id
  const inputArea = document.getElementById("reportInputArea");
  
  if (btn.innerHTML.trim() === "Report A Problem") {
    btn.innerHTML = "Close";
    inputArea.style.display = "block";
    // 如果是用Bootstrap的模态框/下拉组件，这里可以对应调用组件的显示方法
  } else {
    btn.innerHTML = "Report A Problem";
    inputArea.style.display = "none";
    // 对应调用组件的隐藏方法
  }
}

注意事项 #

如果你原有代码中使用了Bootstrap内置的模态框触发能力，建议删除按钮上的data-toggle="myModal" data-target="#myModal"属性，模态框的显隐逻辑统一放到change函数中控制，避免内置逻辑和自定义切换逻辑冲突。

优化方案（适配多语言场景） #

如果你的站点需要做多语言适配，按钮文案会动态变化，用文本判断会失效，可以用自定义属性存储切换状态，逻辑更稳定：

function change() {
  const btn = document.getElementById("myBtnToReportABug");
  const inputArea = document.getElementById("reportInputArea");
  
  // 初始状态默认是关闭状态，status为0
  const currentStatus = btn.getAttribute("data-status") || 0;
  if (currentStatus == 0) {
    btn.innerHTML = "Close";
    inputArea.style.display = "block";
    btn.setAttribute("data-status", 1);
  } else {
    btn.innerHTML = "Report A Problem";
    inputArea.style.display = "none";
    btn.setAttribute("data-status", 0);
  }
}

以上两种方案都不需要修改你现有的HTML代码，直接替换JS逻辑即可生效。

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