甜蜜警报在单击按钮时不起作用

Question

你好，我试图使用sweetalert onclick，但当我点击按钮什么都没有发生，只有刷新页面时显示警报，我想要实现的是，当点击按钮警报出现，而不是刷新页面时。

我试图使用sweetalert，假设当我点击一个按钮应该出现警报，但这并不发生事实上，在启动时它会自动出现每次我加载页面，我想要实现的是，只有当我点击按钮警报出现，而不是每次页面刷新。

function successAlert()
Swal.fire(
'saved!',   
'success'
)

.show-example-btn {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">
<div class="showcase sweet">
<button
class="show-example-btn"
aria-label="Show SweetAlert2 success message"
onclick="successAlert()">
save
</button>
<pre data-example-id="sweetAlert"></pre>
</div>

Answer 1

函数定义不好，缺少像Quentin在评论中提到的{和}，并且基本的警报结构是这样的

Swal.fire(
title,
text,
icon
)

你正在添加success消息，文本应该去，你的图标永远不会显示在你的警报。你应该把它改成这样:

function successAlert() {
Swal.fire(
'saved!',
'You successfully pressed the button',
'success'
)
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<div class="showcase sweet">
<button class="show-example-btn" aria-label="Show SweetAlert2 success message" onclick="successAlert()">
save
</button>
<pre data-example-id="sweetAlert"></pre>
</div>