JavaScript button click event listener - Interactive program

JavaScript Event Handling: Exercise-1 with Solution

Button Click Event

Write a JavaScript program that creates a button and add a click event listener to log a message when it's clicked.

Sample Solution:

JavaScript Code:

// Create a button element
const button = document.createElement('button');
button.textContent = 'Click me';

// Add click event listener to the button
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

// Append the button to the document body
document.body.appendChild(button);

Output:

Note: Executed on JS Bin

Explanation:

First, we create a new button element using the "createElement()" method and set its text content to "Click me". We then add a click event listener to the button using the "addEventListener()" method. When the button is clicked, the callback function inside the event listener is executed, which logs the message "Button clicked!" to the console.

Finally, we append the button to the document body using the "appendChild()" method so that it becomes visible on the page.

Flowchart:

Live Demo:

See the Pen javascript-event-handling-exercise-1 by w3resource (@w3resource) on CodePen.

Improve this sample solution and post your code through Disqus.

Event Handling Exercises Previous: JavaScript Event Handling Exercises Home.
Event Handling Exercises Next: JavaScript Dropdown menu - Interactive program.