JavaScript how do you create a screen pressable button in 10 lines?

Vishal Basumatary -

How to create a screen pressable button in JavaScript in 10 lines?

Method 1:

To create a pressable button in JavaScript, we need to use HTML and CSS along with JavaScript. Here is one way to create it:


// Step 1: Create a button element
let button = document.createElement('button');

// Step 2: Add text to the button
button.innerHTML = "Press me";

// Step 3: Add event listener to the button
button.addEventListener('click', () => {
  alert('Button clicked!');
});

// Step 4: Add the button to the HTML document
document.body.appendChild(button);

Explanation:

  • Step 1: We create a button element using JavaScript's createElement() method.
  • Step 2: We add text to the button using the innerHTML property.
  • Step 3: We add an event listener to the button using the addEventListener() method. In this case, we are listening for a 'click' event on the button and calling an alert message.
  • Step 4: We add the button to the HTML document using the appendChild() method.

Method 2:

Another way to create a pressable button is to use HTML and CSS classes along with JavaScript. Here is one way to create it:


// Step 1: Create a button element
let button = document.createElement('button');

// Step 2: Add classes to the button
button.classList = "pressable-button";

// Step 3: Add text to the button
button.innerHTML = "Press me";

// Step 4: Add event listener to the button
button.addEventListener('click', () => {
  alert('Button clicked!');
});

// Step 5: Add the button to the HTML document
document.body.appendChild(button);

Explanation:

  • Step 1: We create a button element using JavaScript's createElement() method.
  • Step 2: We add a CSS class to the button using the classList property. This class can be used to style the button later.
  • Step 3: We add text to the button using the innerHTML property.
  • Step 4: We add an event listener to the button using the addEventListener() method. In this case, we are listening for a 'click' event on the button and calling an alert message.
  • Step 5: We add the button to the HTML document using the appendChild() method.

Both methods achieve the same result, but Method 2 allows for more customization with CSS styles. You can also add more attributes to the button element, such as an ID or name, depending on your needs.