按钮文本不会切换

Question

我不知道我在这里做错了什么，我一直在阅读我的 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 = " >> ";
      }
    }

Answer 1

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

 function toggle(element) { element.innerText = element.innerText === '>>'? '<<': '>>'; }

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

Answer 2

 function toggle() { console.log(document.getElementById("sidebarButton").innerHTML) if (document.getElementById("sidebarButton").innerHTML == " &gt;&gt; ") { document.getElementById("sidebarButton").innerHTML = " << "; } else if (document.getElementById("sidebarButton").innerHTML == " &lt;&lt; ") { document.getElementById("sidebarButton").innerHTML = " >> "; } }

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

Answer 3

您应该使用innerText 。 它会工作的。

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

Answer 4

问题在于“>>”符号，“>”HTML 具有“>”符号已经预定义，因此当您编写“>”时，您想使用 HTML 实体> 或< （大于或小于符号）

<button id="sidebarButton" class="sidebarButton" onclick="toggle()"> &gt;&gt; </button>
<script>

function toggle() {
      if (document.getElementById("sidebarButton").innerHTML == "&gt;&gt;") {
        document.getElementById("sidebarButton").innerHTML = " &lt;&lt; ";
      } else if (document.getElementById("sidebarButton").innerHTML == " &lt;&lt; ") {
        document.getElementById("sidebarButton").innerHTML = " &gt;&gt; ";
      }
    }
</script>

Answer 5

将元素参数添加到您的 function。 this作为参数传递，然后使用三元运算符来切换内容。

 function toggle(element) { //To demonstrate the html as interpreted bu javascript console.log(element.innerText); console.log(element.innerHTML); element.innerHTML = element.innerHTML == " &gt;&gt; "? " << ": " >> "; }

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

Answer 6

你想切换单词然后你需要在那个段落中放另一个 id 然后把它放在 display='block'

function toggle(){
let para=document.getElementbyId('para');
if(para.style.display !='none'){
para.style.display='none';
}
else{
para.style.display='block';
}