Как объединить forEach и метод сортировки вместе?

Question

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

Еще одна проблема, с которой я сталкиваюсь, - это слияние метода forEach с методом сортировки. Он просто возвращает "undefinedbr".

var hobbies = ["Conga Dancing", "Reading", "Ethical Hacking", "Snowboarding", "Social Expeirementing", "Playing Games"];
hobbies.forEach(myloopfunc);

function myloopfunc(item, index) {
  hobbies.sort();
  document.getElementById("sorting").innerHTML = hobbies;
  document.getElementById("sorting").innerHTML = index+" "+ item+ "<br>";
}

<button onclick="myloopfunc()">Button</button>

<p id="sorting"></p>

РЕДАКТИРОВАННАЯ версия

Новый код все еще не работает, даже если он соответствует коду в этом https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_foreach. Я не понимаю, почему это все еще не работает, хотя код на сайте работает.

Заранее спасибо

Answer 1

Я изменил ваш код и не уверен, что мой код делает то, что вы хотите.

Насколько я знаю, вы хотите отсортированный массив при нажатии кнопки, но в вашем html код, вы вызываете myloopfunc(), который выполняет только задачу назначения индекса для каждого элемента и вывода в браузер. Здесь сортировки не происходит.

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

var hobbies=["Conga Dancing", "Reading", "Ethical Hacking", "Snowboarding", "Social Expeirementing", "Playing Games"]; 

function myloopfunc(item,index) { document.getElementById("sorting").innerHTML+=index+" "+item +"<br>"; }
function callAnotherFunction() {
  hobbies.sort().forEach(myloopfunc); 
}

<button onclick=callAnotherFunction()>Button</button>

<p id="sorting"></p>