javascript-在按钮中显示符号而不是文本

Question

我正在使用一个按钮打开菜单，但我喜欢这个按钮显示菜单符号而不是“菜单”文本。

如下：

☰-> ☰

✖-> ✖

function toggleText(button_id) {
  var el = document.getElementById(button_id);
  if (el.firstChild.data == "✖") {
    el.firstChild.data = '☰';
  } else {
    el.firstChild.data = "✖";
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this.id);">&#9776;</button>

Answer 1

尝试使用innerHTML并使用this直接传递按钮元素：

function toggleText(button) {
  if (button.innerHTML == "✖" || button.innerHTML == "✖") {
    button.innerHTML = '☰';
  } else {
    button.innerHTML = '✖';
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this);">&#9776;</button>

注意：innerHTML可以是✖或✖，因此请同时检查两者。

Answer 2

只需更改按钮的实际文本，而不是子按钮即可。另外请注意，innerHTML可以是实体也可以是呈现的实体，因此也请检查一下：

function toggleText(button_id) {
  var el = document.getElementById(button_id);
  if (["✖", "✖"].includes(el.innerHTML)) {
    el.innerHTML = '☰';
  } else {
    el.innerHTML = "✖";
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this.id);">&#9776;</button>