Back to Exercises
Try Some Events
// Click
btn.addEventListener('click', () => console.log('Clicked'));
// Mouseover
box.addEventListener('mouseover', () => box.style.background = 'orange');
// Keyboard
input.addEventListener('keyup', (e) => console.log(e.key));
Full Code Used in This Demo
HTML
<button id="btnClick">Click me</button>
<div id="hoverBox">Hover me</div>
<input id="keyInput" placeholder="Type here">
CSS
#hoverBox { height: 80px; border-radius: 8px; }
JavaScript
document.getElementById('btnClick').addEventListener('click', function() {
document.getElementById('out-click').textContent = 'Button was clicked!';
});
const hoverBox = document.getElementById('hoverBox');
hoverBox.addEventListener('mouseover', function() {
hoverBox.style.background = '#fca5a5';
});