Onclick Function
Home
Snippets
Onclick Function
HTML
CSS
JS
<button class="button" data-button> Click to see an error </button> <div class="alert" data-alert> <h2 class="alert__title">Paradoxal Error</h2> <p class="alert__description"> There was an error while trying do display an error. </p> </div>
.button { display: block; margin: 50px auto; padding: 8px 32px; background-color: #9eee2d; border-radius: 4px; font-size: 16px; border: none; color: #fff; cursor: pointer; transition: .1s all linear; font-family: sans-serif; &:hover { background-color: darken(#a2cf00, 10%); } } .alert { background-color: #FBE8E4; border: 1px solid #DC2500; color: #DC2500; margin: 0 auto; width: fit-content; text-align: center; padding: 32px 64px; font-family: sans-serif; border-radius: 8px; display: none; }
const button = document.querySelector('[data-button]'), alert = document.querySelector('[data-alert]'); button.addEventListener('click', () => { alert.style.display = 'block' })
Ad #1
Ad #2
Scroll to Top