JavaScript 'onclick' event examples for beginners

📚 Quick Study Guide

• 🖱️ The `onclick` event is triggered when an HTML element is clicked.
• ✍️ You can add the `onclick` attribute directly to HTML elements like buttons, divs, or spans.
• ✨ The value of the `onclick` attribute is a JavaScript code snippet that will be executed when the element is clicked.
• 📢 Common uses include triggering functions, displaying alerts, changing content, and submitting forms.
• 💡 Best practice: Use JavaScript files to keep HTML clean and separate behavior from structure. Add event listeners using `addEventListener()` method.
• 🔗 Example: `Click Me`

🧪 Practice Quiz

1. Which HTML attribute is used to specify code to be executed when an element is clicked?

1. `onhover`
2. `onclick`
3. `onpush`
4. `onactivate`

2. What will happen when the following button is clicked? `Click Me`

1. The page will reload.
2. The `myFunction()` will be executed.
3. Nothing will happen.
4. An error will occur.

3. Which of the following is the correct way to add an event listener to a button using JavaScript?

1. `button.addEventListener(click, myFunction);`
2. `button.addEventListener("click", myFunction);`
3. `button.on('click', myFunction);`
4. `button.onClick = myFunction();`

4. What is the purpose of the `onclick` event?

1. To style an HTML element.
2. To execute JavaScript code when an element is clicked.
3. To change the text color.
4. To hide an element.

5. Which of the following JavaScript code will display an alert box when a button is clicked?

1. `Click`
2. `Click`
3. `Click`
4. `Click`

6. What does the following code do? ``

1. It changes the background color of the div.
2. It displays an alert box.
3. It changes the text inside the div to 'Clicked!'.
4. It hides the div.

7. Why is it generally recommended to use `addEventListener` instead of inline `onclick` attributes?

1. `addEventListener` is shorter to write.
2. `addEventListener` allows for better separation of concerns (HTML structure vs. JavaScript behavior).
3. Inline `onclick` attributes are faster.
4. There is no difference between them.

Click to see Answers

1. B
2. B
3. B
4. B
5. B
6. C
7. B