Завершение массива объектов reverse () и sort (), чтобы сделать его функциональным при нажатии - PullRequest
0 голосов
/ 07 декабря 2018

У меня проблемы с завершением кода.У меня есть массив объектов, и мне нужно использовать кнопку для выполнения функций reverse() и sort().Я добавляю кнопки в свой HTML, но мне нужна помощь в выполнении метода «function» в моем javascript, чтобы кнопка работала на веб-странице.Я не могу понять это.Кто-то, пожалуйста, помогите.

HTML-код:

<html>

<head>
  <title>Lab 9</title>
</head>

<body>
  <section id="section"></section>
  <script src="Lab9.js"></script>

  <button onClick="reverse()">Reverse</button>
  <button onClick="sort()">Sort</button>
</body>
</html>

Javascript код:

"use strict";

let motorcycles = [
    {"Color": "Red", "Type": "Honda"}, {"Color": "White", "Type": "Kawasaki"},
    {"Color": "Blue", "Type": "BMW"}, {"Color": "Black", "Type": "Yamaha"},
    {"Color": "Red & White", "Type": "Ducati"}
];

//executes the reverse() function
function reverse() {
    return motorcycles;
}
//executes the sort() function
function sort() {

}

//Unordered List
let ul = '<ul>';

//Looping through the array
for (let index = 0; index < motorcycles.length; index++) {
    let motorcycle = motorcycles[index];
    let motorcycleColor = motorcycle.Color;
    let motorcycleType = motorcycle.Type;

    ul += `<li>${motorcycleColor} ${motorcycleType}</li>`;

    console.log(motorcycleColor);
    console.log(motorcycleType);
}

ul += '</ul>';
document.getElementById("section").innerHTML = ul;

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Есть несколько разных вопросов, я думаю, у вас есть здесь.Первое, что может помочь, это просто увидеть Array.sort в действии:

const motorcycles = [
  {"Color": "Red", "Type": "Honda"}, {"Color": "White", "Type": "Kawasaki"},
  {"Color": "Blue", "Type": "BMW"}, {"Color": "Black", "Type": "Yamaha"},
  {"Color": "Red & White", "Type": "Ducati"}
]

const sortedMotorcycles = motorcycles.sort( (a, b) => {
  return a.Type.localeCompare(b.Type)
})

console.log(sortedMotorcycles)

Для сравнения строк String.localeComparison выполняет довольно приличную работу по алфавиту по умолчанию.После того, как вы создали этот массив, вы можете перебирать его, чтобы генерировать элементы HTML.Хотя вы можете избежать передачи строк непосредственно в innerHTML из-за проблем с внедрением скрипта, которые идут с ним.

0 голосов
/ 07 декабря 2018

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

 function reverse() {
 let ul = '<ul>';

  //Looping through the array
  for (let index = 0; index < motorcycles.length; index++) {
      let motorcycle = motorcycles[index];
      let motorcycleColor = motorcycle.Color;
      let motorcycleType = motorcycle.Type;

      ul += `<li>${motorcycleColor} ${motorcycleType}</li>`;

      console.log(motorcycleColor);
      console.log(motorcycleType);
  }

  ul += '</ul>';
  document.getElementById("section").innerHTML = ul;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...