Как исправить кнопку, которая не связана с функцией, используемой для сортировки данных? (только javascript, без jquery)

Я пытаюсь создать кнопку сортировки определенных данных, чтобы я мог отсортировать их по возрастанию, но в коде есть ошибка, с чего мне начать? Спасибо

var planetsObj = [{
    name: "Alderaan",
    rotation_period: 24,
    orbital_period: 364
  },
  {
    name: "Yavin IV",
    rotation_period: 24,
    orbital_period: 4818
  },
  {
    name: "Hoth",
    rotation_period: 23,
    orbital_period: 549
  },
  {
    name: "Dagobah",
    rotation_period: 23,
    orbital_period: 341
  },
  {
    name: "Bespin",
    rotation_period: 12,
    orbital_period: 5110
  }
]

var sortID = function compare(a, b) {
  if (a.name < b.name)
    return -1;
  if (a.name > b.name)
    return 1;
  return 0;
}
planetsObj.sort(sortID);

window.onload = function compare() {
  document.getElementById("mybutton").onclick = sortID;
}
text = ''
    for(var i=0;i<planetsObj.length;i++){
        console.info(planetsObj[i])
        name = planetsObj[i].name;
        text += '<div>' +name+ '</div>';
    }
    document.querySelector('div#tbody').innerHTML = text
    
    text = '';
    for(var i=0;i<planetsObj.length;i++){
        console.info(planetsObj[i])
        rotation_period= planetsObj[i].rotation_period;
        text += '<div>' +rotation_period+ '</div>';
    }
    document.querySelector('div#yes').innerHTML = text

    text = '';
    for(var i=0;i<planetsObj.length;i++){
        console.info(planetsObj[i])
        orbital_period= planetsObj[i].orbital_period;
        text += '<div>' +orbital_period+ '</div>';
    }
    document.querySelector('div#no').innerHTML = text





    </script>

<body>
  <p>Click the button to sort the table alphabetically, by name:</p>
  <input type = "button" id = "mybutton" value = "sort by name">

  <Table class = "rTable">
    <div id = "tbody"></div>
    <div id = "yes"></div>
    <div id = "no"></div>
  </Table>

Я ожидаю, что каждый раз, когда я нажимаю кнопку, данные будут сортироваться по возрастанию, извините, если вопрос слишком простой, потому что я все еще новичок, большое спасибо

Вы не можете поместить элементы <div> непосредственно в <table>. Он может содержать только <tr> элементов (или <thead>, <tbody> и <tfoot>, которые содержат строки).

— 16.04.2019 07:09

Что вы пытаетесь отсортировать, когда нажимаете кнопку? В таблице ничего нет.

— 16.04.2019 07:10

Если вы хотите отсортировать массив, вам нужно сделать planetsObj.sort(sortID) в функции onclick. sortID — это просто функция сравнения, она ничего не сортирует.

— 16.04.2019 07:11

codepen.io/evenstensberg/pen/MROqNR

— 16.04.2019 07:12

@Barmar Большое спасибо, сэр, я исправлю <table>, извините, я не поставил полный javascript, но я уже отредактировал его с полной кодировкой.

— 16.04.2019 07:16

javascript html

16.04.2019 07:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вам нужно добавить метод для вызова функции сортировки и добавить в событие addEventListener('click', sort);

function sort(){
planetsObj.sort(sortID);
console.info(planetsObj);
}
window.onload = function compare() {
  document.getElementById("mybutton").addEventListener('click', sort);
}

Обновлено: обновление объекта списка отображения в таблице с использованием javascript.

var planetsObj = [{
    name: "Alderaan",
    rotation_period: 24,
    orbital_period: 364
  },
  {
    name: "Yavin IV",
    rotation_period: 24,
    orbital_period: 4818
  },
  {
    name: "Hoth",
    rotation_period: 23,
    orbital_period: 549
  },
  {
    name: "Dagobah",
    rotation_period: 23,
    orbital_period: 341
  },
  {
    name: "Bespin",
    rotation_period: 12,
    orbital_period: 5110
  }
]

var sortID = function compare(a, b) {
  //console.info(JSON.stringify(a))
  if (a.name < b.name)
    return -1;
  if (a.name > b.name)
    return 1;
  
  return 0;
}
function sort(){
planetsObj.sort(sortID);
//console.info(planetsObj);
var tableRef = document.getElementById('rTable').getElementsByTagName('tbody')[0];
for(var i= 0; i < planetsObj.length; i++){
// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);
// Append a text node to the cell
var newText  = document.createTextNode(planetsObj[i].name);
newCell.appendChild(newText);
var newCell2  = newRow.insertCell(1);

// Append a text node to the cell
var newText2  = document.createTextNode(planetsObj[i].rotation_period);

newCell2.appendChild(newText2);
var newCell3  = newRow.insertCell(2);

// Append a text node to the cell
var newText3  = document.createTextNode(planetsObj[i].orbital_period);

newCell3.appendChild(newText3);
}
}
window.onload = function compare() {
  document.getElementById("mybutton").addEventListener('click', sort);
}

<body>
  <p>Click the button to sort the table alphabetically, by name:</p>
  <input type = "button" id = "mybutton" value = "sort by name">

  <table border = "1" class = "rTable" id = "rTable">
      <thead>
    <tr>
      <th>name</th>
      <th>rotation_period</th>
      <th>orbital_period</th>
    </tr>
  </thead>
   <tbody>
        
    </tbody>
  </table>

Большое спасибо за помощь, пропускаю событие addEventListener, попробую отредактировать домашнюю работу

— 16.04.2019 07:18

Я попробовал ваш ответ, и это сработало, я хотел бы спросить, как переставить div так, чтобы сортировались не только консоли, спасибо

— 16.04.2019 08:16

16.04.2019 07:13

Если вы хотите сортировать массив при нажатии кнопки, вам нужно написать функцию, которая делает это, и использовать ее в функции onclick:

window.onload = function() {
  document.getElementById("mybutton").onclick = function() {
    planetsObj.sort(sortID);
  }
}

Большое спасибо, сэр, за вашу помощь, я постараюсь отредактировать домашнее задание.

— 16.04.2019 07:19

16.04.2019 07:13

Сортировка может быть реализована в вашем случае путем сортировки объектов и перестроения таблицы.

Приведенный ниже код при нажатии кнопки сортирует объект планет и перестраивает отсортированную таблицу.

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

Ниже приведен пример кода:

<html>
<head>
<style>
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
</style>
<script>
        var planetsObj = [
        {
        name: "Alderaan", 
        rotation_period: 24, 
        orbital_period: 364
        },
        {
        name: "Yavin IV", 
        rotation_period: 24, 
        orbital_period: 4818
        },
        {
        name: "Hoth", 
        rotation_period: 23, 
        orbital_period: 549
        },
        {
        name: "Dagobah", 
        rotation_period: 23, 
        orbital_period: 341
        },
        {
        name: "Bespin", 
        rotation_period: 12, 
        orbital_period: 5110
        }
    ]
        var planetLabels = ['name', 'rotation_period','orbital_period']; 




        var sortID = function compare(a,b) {
        if (a.name < b.name)
            return -1;
        if (a.name > b.name)
            return 1;
        return 0;
        }

        function sortRows(){
            planetsObj.sort(sortID);
            buildTable(planetLabels, planetsObj, document.getElementById('rTable'));
        }


        window.onload = function compare() {
            buildTable(planetLabels, planetsObj, document.getElementById('rTable'));
        }

        document.getElementById("mybutton").onclick = sortRows();

        function buildTable(labels, objects, tableObj) {
              var thead = document.createElement('thead');
              var tbody = document.createElement('tbody');
          var theadTr = document.createElement('tr');
          for (var i = 0; i < labels.length; i++) {
            var theadTh = document.createElement('th');
            theadTh.innerHTML = labels[i];
            theadTr.appendChild(theadTh);
          }
          thead.appendChild(theadTr);
          tableObj.appendChild(thead);

          for (j = 0; j < objects.length; j++) {
            var tbodyTr = document.createElement('tr');
            for (k = 0; k < labels.length; k++) {
              var tbodyTd = document.createElement('td');
              tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
              tbodyTr.appendChild(tbodyTd);
            }
            tbody.appendChild(tbodyTr);
          }
          tableObj.appendChild(tbody);


        }



    </script>
</head>
<body>
      <p>Click the button to sort the table alphabetically, by name:</p>
      <input type = "button" id = "mybutton" value = "sort by name">

        <table class = "rTable" id = "rTable">

        </table>    
</body>
</html>

Большое спасибо за помощь, постараюсь отредактировать домашнее задание

— 16.04.2019 07:52

16.04.2019 07:50