JavaScript按钮弹窗实现求助：3个按钮对应Alert、Confirm、Prompt功能

嘿，作为JavaScript新手不用发愁，这三个弹窗需求完全可以用JS原生的弹窗API轻松实现，下面是完整的解决方案，我会把每个部分都讲清楚：

完整实现代码 #

<!-- 你的按钮HTML代码 -->
<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>

<script>
// 先获取三个按钮的DOM元素
const alertButton = document.getElementById('alert');
const confirmButton = document.getElementById('confirm');
const promptButton = document.getElementById('prompt');

// 1. Alert按钮的点击逻辑
alertButton.addEventListener('click', () => {
    alert('hello'); // 直接弹出内容为"hello"的提示框
});

// 2. Confirm按钮的点击逻辑
confirmButton.addEventListener('click', () => {
    const userChoice = confirm('是否继续？');
    // 可选：根据用户的选择做后续操作，这里用控制台打印示例
    if (userChoice) {
        console.log('用户选择了继续操作');
    } else {
        console.log('用户取消了操作');
    }
});

// 3. Prompt按钮的点击逻辑
promptButton.addEventListener('click', () => {
    // 生成随机默认名称：前缀+0-999的随机数
    const randomDefaultName = `访客_${Math.floor(Math.random() * 1000)}`;
    const userInput = prompt('请输入你的昵称', randomDefaultName);
    // 处理用户输入：如果用户没点取消就打印输入内容
    if (userInput !== null) {
        console.log('用户输入的昵称是：', userInput);
    } else {
        console.log('用户关闭了输入弹窗');
    }
});
</script>

关键部分解释 #

• 获取DOM元素：用document.getElementById()精准拿到每个按钮，这是给按钮绑定点击事件的前提。
• Alert弹窗：alert()是最基础的提示弹窗，直接传入要显示的文本就行，没什么复杂逻辑。
• Confirm弹窗：这个弹窗会返回一个布尔值——用户点「确定」返回true，点「取消」返回false，你可以根据这个返回值写后续的业务逻辑（比如跳转页面、提交表单之类的）。
• Prompt弹窗：它接受两个参数，第一个是提示文本，第二个是输入框的默认值。这里我用Math.random()生成了一个随机数来拼默认名称，用户可以直接用这个默认值，也可以修改后提交；如果用户关闭弹窗，会返回null，记得做判断哦。

把这段代码放到你的HTML文件里，打开浏览器点击按钮就能看到效果啦～

内容的提问来源于stack exchange，提问作者lajson 22