首页 > 解决方案 > 按钮文本不会切换

问题描述

我不知道我在这里做错了什么,我一直在阅读我的 JS 书并在谷歌上搜索并搞砸了几个小时,但我一生都无法弄清楚我做错了什么。

HTML

<button id="sidebarButton" class="sidebarButton" onclick="toggle()"> >> </button>

JS

function toggle() {
      if (document.getElementById("sidebarButton").innerHTML == " >> ") {
        document.getElementById("sidebarButton").innerHTML = " << ";
      } else if (document.getElementById("sidebarButton").innerHTML == " << ") {
        document.getElementById("sidebarButton").innerHTML = " >> ";
      }
    }

标签: javascripthtml

解决方案


要根据切换原理更改元素上的文本,不需要使用if {}条件。

function toggle(element) {
  element.innerText = element.innerText === '>>' ? '<<' : '>>';      
}
<button id="sidebarButton" class="sidebarButton" onclick="toggle(this)">>></button>


推荐阅读