Блог

Я пытаюсь отредактировать innerHTML элемента списка в другом окне с помощью javascript с помощью приведенного ниже кода.

 function searchNameButton() //this function is called when the user clicks the search by name button.
{
    name = document.getElementById("nmSearch").value;
    window = window.open("search.html"); //opens a new window, can be accessed through this window variable
    matchIndexes = [];

    for (i = 0; i < pokemon.length; i  ) //do the actual search here
    {
        if (pokemon[i][1].toLowerCase().includes(name.toLowerCase())) //converts to lowercase so that the search is case-insensitive
        { 
            matchIndexes.push(i);
        }
    }

    //now to populate the new page, similar to how it was done before
    itemList = window.document.getElementsByClassName("pd");
    console.log(matchIndexes);
    for (i = 0; i < itemList.length; i  )
    {
        itemList[i].innerHTML = generateString(pokemon[matchIndexes[i]]);
    }

}
  

Однако, когда открывается новое окно, ничего не меняется. Я точно знаю, что matchIndexes работает, я вывел его значение, и он находит 3 совпадения в моем тестовом примере (как и должно быть), и аналогично, ItemList правильно заполняется 20 элементами, когда я вывожу это на консоль. Однако изменение innterHTML любого из этих элементов, даже если оно выполняется вне цикла for в качестве теста, ничего не дает. Я не уверен, в чем именно моя ошибка.

Для пояснения, функция generateString() отлично работает в другом месте и даже в наихудшем случае не может вывести пустую строку. По крайней мере, это выведет несколько символов, которые я смогу увидеть в инспекторе.

Любая помощь будет оценена.

window.open() подчеркивает, что

Обратите внимание, что удаленные URL-адреса загружаются не сразу. При window.open() возврате окно всегда содержит about:blank . Фактическая выборка URL-адреса откладывается и начинается после завершения выполнения текущего блока сценария. Создание окна и загрузка ссылочного ресурса выполняются асинхронно.

Поскольку у Window , похоже, есть onload обработчик, я бы просто попытался обернуть части, изменяющие окно, в обработчик событий:

 function searchNameButton() //this function is called when the user clicks the search by name button.
{
    name = document.getElementById("nmSearch").value;
    wnd = window.open("search.html"); //opens a new window, can be accessed through this wnd variable
    matchIndexes = [];

    for (i = 0; i < pokemon.length; i  ) //do the actual search here
    {
        if (pokemon[i][1].toLowerCase().includes(name.toLowerCase())) //converts to lowercase so that the search is case-insensitive
        { 
            matchIndexes.push(i);
        }
    }

    wnd.onload = function()
    {
        //now to populate the new page, similar to how it was done before
        itemList = wnd.document.getElementsByClassName("pd");
        console.log(matchIndexes);
        for (i = 0; i < itemList.length; i  )
        {
            itemList[i].innerHTML = generateString(pokemon[matchIndexes[i]]);
        }
    };
}
  

Но я на самом деле не пробовал это, так что это может сработать, а может и не сработать. Если это не так, я бы добавил некоторый фиктивный журнал в самом начале обработчика, чтобы посмотреть, вызывается ли он вообще, а затем console.log(itemList); строку, чтобы увидеть, находит ли getElementsByClassName() вызов что-нибудь.