Не могу автоматически сортировать кнопки по алфавиту

Question

У меня сейчас проблемы с автоматической сортировкой кнопок по алфавиту. Я не могу понять, как отсортировать эти кнопки (jquery / javascript), но я хочу сделать это автоматически при загрузке страницы. Спасибо за помощь. Вот мой код:

<style>
.games-button {
  background-color: #383838;
  color: #eeeeee;
  text-align: middle;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  height:42px;
  vertical-align: left;
  display: inline-block;
  letter-spacing: 0.5px;
  float: left;
  overflow:hidden;
  margin-left:100px;
  margin-bottom: 2px;
  text-transform: uppercase;

}
.games-button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

</style>

<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">A</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">Z</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">H</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">B</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">N</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">C</button>

Обновление: у меня есть код, который сортирует кнопки по нажатию кнопки. Как я могу сделать это без кнопки?

<button onclick="sortList()">Sort</button>

<ul id="id01">
  <button>z</button>
 <button>a</button> 
 <button>b</button>
 <button>l</button>
 <button>b</button>

</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("button");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Answer 1

Похоже, вы в js разработке. Удачи вам в этом.

Чтобы манипулировать элементами DOM, всегда проще, если вы добавите некоторые трейлы или подсказки, которые помогут вашему коду найти ваши элементы.

В этом случае все ваши Кнопки расположены в элементе body, поэтому для облегчения поиска и замены кнопок поместите их внутри другого элемента. Вот так:

<div id="button-container">
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">A</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">Z</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">H</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">B</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">N</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">C</button>
</div>

Затем найдите их и отсортируйте их.

<script>
  'use strict';
  const buttonContainer = document.getElementById('button-container');
  const sortedButtons = [... buttonContainer.children].sort((buttonA, buttonB) => {
    const name1 = buttonA.innerText.toLowerCase();
    const name2 = buttonB.innerText.toLowerCase();
    if(name1 === name2){
      return 0;
    } else if(name1 < name2){
      return -1;
    } else {
      return 0;
    }
  });
  sortedButtons.forEach(button => buttonContainer.append(button));
</script>

Вот и все.