提示到innerhtml

Question

我正在制作一个成功接受带有警报和提示的订单的机器人。但现在我想直接在页面上显示它。有谁知道我如何在代码中将提示更改为 innerHTML，并且仍然设法使所有功能正常运行（并继续进行下一个问题）？

这是我的代码：

// 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 您可以通过更改消息元素的 innerHTML 来显示消息。然后当用户点击提交按钮时，使用输入的值来收集他们的答案。

注意：此方法是异步的，因此您必须使用 addEventListener 来捕获点击，这与提示不同，提示会暂停任何 JavaScript 的执行，直到用户退出提示.

提示到innerhtml

Promt to innerhtml

html

javascript

innerhtml