在 Javascript 中使用 Window.prompt()答案

【问题标题】：Using Window.prompt() in Javascript在 Javascript 中使用 Window.prompt()
【发布时间】：2016-10-30 19:26:42
【问题描述】：

我有以下代码：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var person = prompt("Choose a name\nJohn\nMike\nSteve\nOliver", "John");

    if (person != null) {
        document.getElementById("demo").innerHTML =
        "Hello " + person + "! How are you today?";
    }
}
</script>

</body>
</html>

它显示一个弹出框，要求用户输入名称，而 john 是默认名称。

我想这样做，以便用户可以单击弹出窗口中显示的名称之一（John、mike、steve、oliver 等），然后单击将导致该名称出现在可键入字段中。这可能吗？我需要在 Javascript 中使用不同类型的提示吗？

我基本上不想输入一个值，但可以通过名称列表单击它，然后单击确定或相应地取消。

因此，例如，如果用户在弹出窗口中单击“Mike”作为链接，则应通过单击而不是键入名称来填充底部的框，并使用名称“Mike”。

希望这是有道理的，任何帮助将不胜感激。

【问题讨论】：

你应该考虑使用模态
我是 javascript 新手，想链接“模态”或回答问题？
getbootstrap.com/javascript

标签： javascript jquery html popupwindow

【解决方案1】：

我想这样做，以便用户可以单击弹出窗口中显示的名称之一（John、mike、steve、oliver 等），然后单击将导致该名称出现在可键入字段中。这可能吗？

不适用于prompt()。您需要用 HTML 制作自己的 UI，并使用具有所需布局的表单。

另外，一个不相关的注释...这段代码很危险：

document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";

当您将文本连接成 HTML 时，您允许人们输入恶意代码，或者只是可能破坏您的 HTML 的普通保留字符。确保改为设置文本。

【讨论】：

任何关于如何制作我自己的 UI 的示例，我是 javascript 的新手，不知道如何处理。
@oerkero 首先学习一些基本的 HTML。具体如何执行此操作由您决定。听起来您需要一些单选按钮和/或输入框。阅读基本输入元素。至于显示/隐藏表单，您可以根据需要设置样式display:none 或display:block。
<script> 中的代码不在innerHTML 中运行。但是像<img src="//" onerror="..." /> 这样的东西可以。

【解决方案2】：

Check Here

我在@brad的基础上添加了一个答案

function myFunction() {
    var person = prompt("Choose a name\nJohn\nMike\nSteve\nOliver", "John");

    if (person != null) {
     document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
    }
}

function myFunction() {
    var person = prompt("Choose a name\nJohn\nMike\nSteve\nOliver", "John");

    if (person != null) {
     document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

【讨论】：

嗯，点击名字没有任何作用？