排序和显示对象数组 JavaScript

Question

我创建了一个函数来显示数组中的对象。

let shownObjects = myArray;
function showTheObjects(displayedObjects) {
    document.getElementByID('divToDisplayObjects').innerHTML = "";
    for (let i of shownObjects) {
        // Code to display the objects
    }
}

此代码按预期工作。

我还在 HTML 中创建了一个包含不同排序选项的选择标签。

我创建了一个函数来根据所选选项对对象进行排序。

let sortButton = document.getElementById('selectID');
function changeSortOfObjects() {
    let sortOption = sortButton.value;
    if (sortOption === "option-1") {shownObjects.sort(Sort By Name)}
    else if (sortOption === "option-2") {shownObjects.sort(Sort By Age)}
    showTheObjects(shownObjects)

}
sortButton.onchange = changeSortOfObjects;
changeSortOfObjects();

当我点击一个选择选项时，所有对象都从屏幕上消失，而不是重新排序。导致对象消失而不是重新排序的问题是什么？

我在 Stack Overflow 上查看了多个不同的问题，但找不到我的问题的任何答案。我也在网上寻找不同的视频和文章，但找不到我的问题的答案。

Answer 1

问题可能是由 showTheObjects 函数引起的，特别是行

document.getElementByID('divToDisplayObjects').innerHTML = "";.

每次调用 showTheObjects 函数时，该行都会清除 ID 为 divToDisplayObjects 的 HTML 元素的内容。这意味着当调用 changeSortOfObjects 函数并对 shownObjects 数组进行排序时，将使用排序后的数组再次调用 showTheObjects 函数，但首先它会清除 divToDisplayObjects 的内容，导致对象从屏幕上消失。

要解决此问题，您可以修改 showTheObjects 函数以仅添加到 HTML 元素的内容而不是清除它。您可以通过将行

document.getElementByID('divToDisplayObjects').innerHTML = "";

更改为

let displayDiv = document.getElementByID('divToDisplayObjects');

，然后将 for 循环中显示对象的行修改为

displayDiv.innerHTML += "<p>" + i + "</p>";.

这会将每个对象附加到 HTML 元素的内容而不是替换它。

这里是修改后的 showTheObjects 函数：

function showTheObjects(displayedObjects) {
    let displayDiv = document.getElementByID('divToDisplayObjects');
    displayDiv.innerHTML = "";
    for (let i of shownObjects) {
        displayDiv.innerHTML += "<p>" + i + "</p>";
    }
}

通过此修改，当调用 changeSortOfObjects 函数对 shownObjects 数组进行排序时，对象不应消失。