如何在弹出的 JavaScript 中提问

在 Web 应用程序中，弹出 JavaScript 对话框是一种常见的方法来与用户交互和获取信息。但是，如何在弹出的 JavaScript 对话框中提问呢？本文将介绍两个常见的方法来实现这一操作。

方法一：使用 window.prompt()

window.prompt() 是一种简单的方法来在弹出的 JavaScript 对话框中提问。该方法会显示一个文本输入框和一个确定按钮。用户可以在文本输入框中输入答案并点击确定按钮来提交。在 JavaScript 中，我们可以使用该方法如下：

let answer = window.prompt('你喜欢什么水果？', '苹果');
if (answer !== null) {
  console.log('你喜欢的水果是：' + answer);
}

其中，window.prompt() 接受两个参数，第一个参数是问题的文本，第二个参数是默认答案。当用户点击确定按钮时，该方法返回用户输入的值。如果用户点击取消按钮，则返回 null。在以上代码中，如果用户没有输入答案，那么默认答案为“苹果”。

方法二：使用自定义对话框

如果想要在弹出的 JavaScript 对话框中自定义布局或添加更多的交互元素，那么可以使用自定义对话框。下面是一个例子：

<button onclick="askQuestion()">提问</button>
<script>
function askQuestion() {
  let dialog = document.createElement('div');
  dialog.innerHTML = `
    <div>你喜欢什么水果？</div>
    <input type="text" id="answer" value="苹果">
    <button onclick="answerQuestion()">确定</button>
    <button onclick="closeDialog()">取消</button>
  `;
  dialog.style.position = 'fixed';
  dialog.style.top = '50%';
  dialog.style.left = '50%';
  dialog.style.transform = 'translate(-50%, -50%)';
  dialog.style.backgroundColor = 'white';
  dialog.style.boxShadow = '0 0 10px gray';
  document.body.appendChild(dialog);
}

function answerQuestion() {
  let answerElement = document.getElementById('answer');
  let answer = answerElement.value;
  if (answer !== '') {
    console.log('你喜欢的水果是：' + answer);
    closeDialog();
  }
}

function closeDialog() {
  let dialog = document.querySelector('div');
  document.body.removeChild(dialog);
}
</script>

在以上代码中，我们在 HTML 中创建一个按钮来触发 askQuestion() 函数。该函数会创建一个 div 元素来作为对话框，并添加一个问题文本、一个文本输入框和两个按钮（确定和取消）。

当用户点击确定按钮时，我们会调用 answerQuestion() 函数来获取用户输入的值并输出到控制台。如果用户没有输入值，则不会执行任何操作。

当用户点击取消按钮时，我们会调用 closeDialog() 函数来关闭对话框。

在方法二中，我们可以通过 CSS 来自定义对话框的样式和布局。例如，我们可以将样式放在一个单独的 CSS 文件中，并在 HTML 中引用：

<button onclick="askQuestion()">提问</button>
<link rel="stylesheet" href="dialog.css">
<script>
// ...
</script>

总的来说，以上两种方法都非常简单易懂，可以根据具体需求选择使用。