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>