我试图在函数中调用另一个元素之前显示一个innerHTML元素，目前我的第二个innerHTML默认显示。因此，函数buySquare（）中的一个;有没有一种方法可以阻止这种情况的发生，并显示第一个innerHTML，然后显示第二个？

/**
 * Moves players pieces around the board. 
 */
function movePiece() {
    let diceRoll = rollDice();
    if (currentPlayer === players[0]) {
        currentPosition1 += diceRoll;
        if (currentPosition1 >= board.length) {
            currentPosition1 -= board.length;
        }
        let currentSquare = squares[currentPosition1];
        currentSquare.appendChild(pieceOne);
        message.innerHTML = `${players[0]} you are on ${pieceOne.parentElement.getAttribute('data-type')} `;
        if (squareOwned === false) {
            buySquare(currentPlayer);
        }
        currentPlayer = players[1];
    } else {
        currentPosition2 += diceRoll;
        if (currentPosition2 >= board.length) {
            currentPosition2 -= board.length;
        }
        let currentSquare = squares[currentPosition2];
        currentSquare.appendChild(pieceTwo);
        currentPlayer = players[0];
        message.innerHTML = `${players[1]} you are on ${pieceTwo.parentElement.getAttribute('data-type')}`;
    }
}

var squareOwned = false;
async function buySquare(currentPlayer) {
    if (currentPlayer === players[0]) {
        message.innerHTML = `<p>Would you like to buy ${pieceOne.parentElement.getAttribute('data-type')}`;
        let input = await getUserInput();
        if (input === 'y') {
            console.log('you have bought this square');
        } else {
            console.log('you have not bought this square');
        }
    }
}