每次点击发送按钮都会发出警报

Question

我想做一个警报模式(从bootstrap5)每次发送按钮点击javascript DOM，但在我的情况下，它只是可以显示"点击一次发送按钮，之后就不会再出现了

模态的HTML

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
<strong>Thank you!</strong> We have received your message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

和我的Javascript:

const scriptURL = 'https://script.google.com/macros/......'
const form = document.forms['portofolio-contact-form']
const myAlert = document.querySelector('.alert')
const btnKirim = document.querySelector('.my-btn')
const btnLoading = document.querySelector('.btn-loading')
form.addEventListener('submit', e => {
e.preventDefault();
btnLoading.classList.toggle('d-none')
btnKirim.classList.toggle('d-none')
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
btnLoading.classList.toggle('d-none')
btnKirim.classList.toggle('d-none')
myAlert.classList.toggle('d-none')
form.reset()
console.log('Success!', response)
})
.catch(error => console.error('Error!', error.message))
})

所以每次我点击发送按钮它成功发送到我的Google表单，它会显示警报模型。然而，我只能显示这个模态一次，在第一次之后，它不会再次显示，直到我刷新页面。

Answer 1

我有答案了

"Alert"——HTML

<div id="alert" class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
<strong>Thank you!</strong> We have received your message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

我们可以看到data-bs-dismiss是均值

当一个警告被解除时，元素将完全从页面结构中删除。如果键盘用户使用关闭按钮取消警报，他们的焦点将突然丢失，并且根据浏览器的不同，将重置到页面/文档的开头。

所以我们必须删除这个，使警报不删除，当用户单击关闭按钮我们必须添加一个onclick属性值为a函数，这样的:

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
<strong>Thank you!</strong> We have received your message.
<button type="button" class="btn-close" onclick="myfunction()" aria-label="Close"></button>
</div>

Javascript

当用户点击发送按钮时，'d-none'类将被移除，用户点击关闭按钮后，'d-none'类将被添加

const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'
const form = document.forms['portofolio-contact-form']
const myAlert = document.querySelector('.alert')
const btnKirim = document.querySelector('.my-btn')
const btnLoading = document.querySelector('.btn-loading')

form.addEventListener('submit', e => {
e.preventDefault();
btnLoading.classList.toggle('d-none')
btnKirim.classList.toggle('d-none')
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
btnLoading.classList.toggle('d-none')
btnKirim.classList.toggle('d-none')
// remove the d-none class
myAlert.classList.remove('d-none')
form.reset()
console.log('Success!', response)
})
.catch(error => console.error('Error!', error.message))
})
// add the removed class(d-none)
function myfunction(){
myAlert.classList.add('d-none')
}

希望有一天这能帮助到人们