Разрешить обещание в onclick

Question

Я пытаюсь заставить работать приведенный ниже код. Первая функция (prepareNewCard) создает div на веб-странице, поэтому я использую обещание, чтобы убедиться, что следующая функция (getSearchTerm) выполняется только после создания div. getSearchTerm предназначен для разрешения поискового термина из ранее созданного div. Чтобы проверить это, я пытаюсь console.log поискового запроса. Тем не менее, поисковый термин записывается как нулевой, однако console.log («здесь») внутри функции работает как положено. Мне кажется, что обещание разрешается до .onclick, но я не понимаю, как это могло произойти.

Вот код для этих двух функций

function prepareNewCard() {
    //Most of this not relevant to the question, creating the div
    var currentCard = document.createElement("div");
    currentCard.className += " card";
    currentCard.className += " currentCard";
    var currentSearch = document.createElement("input");
    currentSearch.className += " searchInput";
    currentSearch.placeholder += "Enter a search term...";
    var searchButton = document.createElement("button");
    searchButton.className += " searchButton";

    //Create the card to be searched                                                    
    currentCard.appendChild(currentSearch);
    currentCard.appendChild(searchButton);

    //Add this card to the main div                                                     
    const searchResultsArea = document.getElementById("searchResults");

    //The promise being returned
    return new Promise(function(resolve, reject) {
            currentCards = document.getElementById(".currentCard");
            if (currentCards === null) {
                searchResultsArea.appendChild(currentCard);
                resolve(currentCard);
            } else {
                reject('Use your current card before creating a new one');
            }
        });
}

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    currentSearchButton.onclick = function() {
        return new Promise(function(resolve, reject) {
                var currentSearchInput = currentSearchBar.value;
                if (currentSearchInput !== null) {
                    resolve(currentSearchInput);
                    console.log("here");
                } else {
                    reject("Please input search term");
                }
            });
    }
}

Код, который вызывает эти функции, находится здесь

    newCardButton.onclick = function() {
        prepareNewCard()
        .then(function(currentCard) {
                getSearchTerm(currentCard)
                .then(function(searchTerm) {
                     console.log(searchTerm)
                })  
                .catch(function(error) {
                    console.log(error)
                });
        })
        .catch(function(error) {
                console.log(error);
        });
    }

Разве это невозможно с javascript обещаниями? Я попробовал несколько конфигураций для функции обещания .then, и, похоже, ни одна из них не работает. Заранее спасибо!

РЕДАКТИРОВАТЬ:

Вот еще одна версия без обещаний.

function prepareNewCard() {
    //Same code above to create div
    const searchResultsArea = document.getElementById("searchResults");
    searchResultsArea.appendChild(currentCard);
    return currentCard;
}

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    currentSearchButton.onclick = function() {
    console.log("TEST");
    return currentSearchBar.value;
}

    let currentCard;
    let currentSearchTerm;
    newCardButton.onclick = function() {
    currentCard = prepareNewCard();
    currentSearchTerm = getSearchTerm(currentCard);
    console.log(currentSearchTerm);
}

Консоль для приведенного выше кода выглядит следующим образом:

Нажмите кнопку newcard и сразу же получите 'undefined' в ответ на console.log (currentSearchTerm). Затем при нажатии кнопки поиска в динамически создаваемой консоли div выводит «ТЕСТ» и ничего больше.

Answer 1

Проблема в том, что вы возвращаете обещание из функции обработчика onclick, а не из getSearchTerm, и оно ничего не возвращает, поэтому должно быть:

function getSearchTerm(currentCard) {
    currentSearchBar = currentCard.querySelector(".searchInput");
    currentSearchButton = currentCard.querySelector(".searchButton");

    return new Promise(function(resolve, reject) {
          currentSearchButton.onclick = function() {
                var currentSearchInput = currentSearchBar.value;
                if (currentSearchInput !== null) {
                    resolve(currentSearchInput);
                    console.log("here");
                } else {
                    reject("Please input search term");
                }
          }
     });
}

Также, возвращать обещание из prepareNewCard совершенно не нужно, так как оно синхронное, вместо этого просто верните значение или выведите ошибку:

currentCards = document.getElementById(".currentCard");
if (currentCards === null) {
    searchResultsArea.appendChild(currentCard);
    return currentCard;
} else {
    throw 'Use your current card before creating a new one';
}