Promt для innerhtml

Question

Я создаю бота, который успешно принимает заказы с предупреждениями и подсказками. Но теперь я хочу вместо этого показать это прямо на странице. Кто-нибудь знает, как я могу изменить подсказки на внутренний HTML в коде, и все же удается заставить все работать (и постоянно переходить к следующему вопросу)?

Это мой код:

// Iteration 2
alert(`Hey! Happy to serve you pizza. On our menu we have ${vegetarian.toLowerCase()}, ${hawaiian.toLowerCase()} and ${pepperoni.toLowerCase()} pizza.`)


// Iteration 3 & 5
let orderName = prompt("Enter the name of the pizza you'd like to order today.").toLowerCase()
console.log(`orderName = ${orderName}`)

let orderQuantity
while(true) {
    if (checkOrderName(orderName)) {
        console.log("Right type of pizza")
        orderQuantity = prompt(`How many ${orderName} pizzas do you want?`)
        break;
    } else {
        console.error("Wrong type of pizza")
        orderName = prompt(`we don't have ${orderName} on the menu. Please choose something from the menu:`)
    }
}
console.log(`Exited while loop. orderQuantity = ${orderQuantity}`)

// Iteration 4
let orderTotal = calculatePrice(orderQuantity, pizzaPrice) 
console.log(`orderTotal = ${orderTotal}`)
// alert("Great I'll get started on your " + orderName + " right away. It will cost " + orderTotal + " kr. It will take " + cookingTime(orderQuantity) + " min.")

document.getElementById("pop-up-replacement").innerHTML = `Great I'll get started on your ${orderName} right away. It will cost ${orderTotal} kr. It will take ${cookingTime(orderQuantity)} min.`

```  

Answer 1

По сути, вам нужно иметь элемент html, в котором вы можете отобразить свое сообщение / вопрос. Затем добавьте элемент ввода, чтобы пользователи могли вводить свой ответ.

Пример html

<h2 id="message"></h2>
<input id="input" />
<button id="submit">Submit</button>

Затем, используя JavaScript, вы можете отобразить сообщение, изменив внутренний HTML элемента сообщения. Затем, когда пользователь нажимает кнопку отправки, используйте значение ввода, чтобы собрать свой ответ.

Примечание. Этот метод является асинхронным, поэтому вам нужно будет использовать addEventListener для захвата кликов, в отличие от приглашения, которое приостанавливает выполнение любого JavaScript до тех пор, пока пользователь не выйдет из приглашения.