3个按钮上的Javascript警报[关闭]答案

【问题标题】：Javascript alert on 3 buttons [closed]3个按钮上的Javascript警报[关闭]
【发布时间】：2018-06-01 11:17:54
【问题描述】：

我是 Java 脚本的新手。我有 3 个按钮。

<button type="button" class="btn btn-primary m-1" id="alert">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt">Prompt!</button>

我需要在点击它们时弹出一个警报，所以对于第一个“警报”，它会是你好。第二个是确认您是否确定继续。最后一个是一个提示，只是其中的一个随机名称。

感谢所有答案！ :D

【问题讨论】：

欢迎来到 Stack Overflow！ StackOverflow 不是免费的编码服务。所以希望你try to solve your own problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)
添加事件处理程序的方法有很多。你可以在 HTML 中使用onclick，你可以在 Javascript 中使用addEventListener()，你可以在 jQuery 中使用 .on()。
如果您使用 Google，您会发现多个示例说明如何完成这项基本任务。
任何关于编写 Javascript Web 应用程序的教程都应该解释基础知识。
您可以访问 tizag.com 或 tutorialspoint.com 学习 JavaScript 的基础知识

标签： javascript html

【解决方案1】：

document.getElementById('alert').addEventListener('click', function() {
  alert('Hello World');
});
document.getElementById('confirm').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('prompt').addEventListener('click', function() {
  prompt('Enter your name');
});

<button type="button" class="btn btn-primary m-1" id="alert">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt">Prompt!</button>

【讨论】：

【解决方案2】：

onclick 作为按钮的属性是一种可能性：

<button type="button" class="btn btn-primary m-1" id="alert" onclick="alert('Hello');">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm" onclick="confirm('Are you sure?');">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt" onclick="prompt('Enter something:');">Prompt!</button>

或者为每个元素分配一个eventListener：

document.getElementById('alertButton').addEventListener('click', function() {
  alert('Hello');
});
document.getElementById('confirmButton').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('promptButton').addEventListener('click', function() {
  prompt('Enter something');
});

<button type="button" class="btn btn-primary m-1" id="alertButton">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirmButton">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="promptButton">Prompt!</button>

或者使用onclick 属性来触发一个函数：

function someAlert() {
  alert("Hello");
}
function someConfirm() {
  confirm("Are you sure?");
}
function somePrompt() {
  prompt("Enter something:");
}

<button type="button" class="btn btn-primary m-1" id="alert" onclick="someAlert()">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm" onclick="someConfirm()">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt" onclick="somePrompt()">Prompt!</button>

【讨论】：

【解决方案3】：

试试这个

function myFunctionAlert() {
    alert("I am an alert box!");
}
function myFunctionConfirm() {
    confirm("Are you Sure?");
}
function myFunctionPrompt() {
    prompt("Enter the number");
}

<button type="button" class="btn btn-primary m-1" id="alert" onclick="myFunctionAlert()" >Alert!</button>
            <button type="button" class="btn btn-success m-1" id="confirm" onclick="myFunctionConfirm()" >Confirm!</button>
            <button type="button" class="btn btn-info m-1" id="prompt" onclick="myFunctionPrompt()" >Prompt!</button>

【讨论】：

所有 3 个函数都返回警报。

【解决方案4】：

得到它的工作感谢您的helo

document.getElementById('alertButton').addEventListener('click', function() {
  alert('Hello');
});
document.getElementById('confirmButton').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('promptButton').addEventListener('click', function() {
  prompt('Enter something');
});

<button type="button" class="btn btn-primary m-1" id="alertButton">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirmButton">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="promptButton">Prompt!</button>

【讨论】：