onclick内でPromiseを解決する

私は以下のコードを機能させようとしています。最初の関数（prepareNewCard）はWebページにdivを作成するので、promiseを使用して、divが作成されたときにのみ次の関数（getSearchTerm）が実行されるようにします。getSearchTermは、以前に作成されたdivの検索語で解決することを目的としています。これをテストするために、検索語をconsole.logにしようとしています。ただし、検索語はnullとしてログに記録されますが、関数内のconsole.log（ "here"）は期待どおりに機能します。.onclickの前に約束が解決されているように見えますが、これがどのように発生するのかわかりません。

これが2つの関数のコードです

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);
        });
    }

これはjavascriptpromiseでは不可能ですか？私はpromise.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);
}

上記のコードのコンソールは次のようになります。

newcardbuttonをクリックすると、console.log（currentSearchTerm）に応答してすぐに「undefined」が表示されます。次に、動的に作成されたdivコンソールでsearchButtonをクリックすると、「TEST」だけが出力されます。