JavaScript Hide Button After Click

JavaScript Hide Button After Click

In this tutorial we will see how to Hide Button After Clicking it using JavaScript. For this we have used the onclick event, JavaScript this and HTML DOM Style Object.

HTML Code

HTML Code is given below, This code contains HTML Button with onclick event.

     Click Me To Hide Me!   

onclick event

The onclick event occurs when an HTML element is clicked. In this example onclick event handler is used to execute the JavaScript function once the button is clicked.

JavaScript Code

Take a look at the JavaScript code, this code is further explained below.

Demo

JavaScript this

JavaScript this refers to an object, when used with event handlers JavaScript this refers to HTML element.

In this example JavaScript this is used to target button element.

HTML DOM Style Object

The HTML DOM Style Object is used to set or return the style properties of HTML element.

In this example, it is used to set the display property of button to none.

This will Hide the Button, once it is clicked.

Video Tutorial

Источник

Hide HTML Buttons and Show Them Using Onclick

1. Use the CSS display Property to Show the Hidden Buttons in HTML
2. Use the jQuery show() Method to Show the Hidden Buttons in HTML

This tutorial will introduce a few methods to hide the HTML buttons and make them visible using the onclick event.

Use the CSS display Property to Show the Hidden Buttons in HTML

We can hide an HTML button first by setting its display property to none . Then, we can set the display property to inline or block using JavaScript.

The display property inline or block will show the hidden HTML buttons. The difference between display: inline and display: block is that the inline component can have two or more components in a line or row.

But block components can have only one component in a line or row.

For example, create a button and name it Show . Set the onclick attribute of the button to makeChange() .

The makeChange() function is called with the click of the button Show . Then create the other three buttons and name them Button1 , Button2 and Button3 .

Set the id of Button1 as b1 , Button2 as b2 , and Button3 as b3 . In CSS, select the buttons by their id and set the display property to none .

Next, in JavaScript, create a function makeChange() . Inside that function, set the display property of each button to block .

Select the specific button by its id as document.getElementById(«b1») for the first button. Then, set the display by assigning document.getElementById(«b1»)style.display to block .

Repeat it for the other two buttons.

button onclick="makeChange();">Showbutton> button id="b1">Button1button> button id="b2">Button2button> button id="b3">Button3button> 

function makeChange()   document.getElementById("b1").style.display = "block";  document.getElementById("b2").style.display = "block";  document.getElementById("b3").style.display = "block"; > 

Use the jQuery show() Method to Show the Hidden Buttons in HTML

We can also use the jQuery show() function to show the hidden HTML elements. The show() function only displays the selected HTML components whose display property is set to none .

It doesn’t work for HTML elements whose visibility property is set to none . We will use the same method as above to hide the buttons.

We will also reuse the HTML structure used in the method above.

After setting the display property of the button to none , create a makeChange() function in JavaScript. Inside the function, select the buttons with their id and call the jQuery show() method as $(‘#b1, #b2, #b3’).show() .

When the Show button is clicked, the hidden buttons will be displayed. Thus, we can use the jQuery show() method to display the hidden buttons in HTML.

button onclick="makeChange();">Showbutton> button id="b1">Button1button> button id="b2">Button2button> button id="b3">Button3button> 

function makeChange()   $('#b1, #b2, #b3').show(); > 

Источник

JavaScript Hide Button

1. Use Visibility Property to Hide Button in JavaScript
2. Use Display Property to Hide Button in JavaScript

In today’s post, we’ll learn about hiding buttons in JavaScript.

Use Visibility Property to Hide Button in JavaScript

The CSS property visibility shows or hides an element without affecting the layout of a document.

The element box is invisible but affects the layout as usual. The element’s descendants are visible if their visibility is set to visible .

Using a hidden visibility value for an element removes it from the accessibility tree. As a result, the screen reader technology no longer announces the element and all of its children.

Visibility values are toggled between visible and invisible . Therefore, one of the start or end values must be visible, or no interpolation can be performed.

The value is interpolated as a discrete step, assigning time-function values between 0 and 1 to the visible endpoint and other time-function values to the nearest endpoint.

You can find more information about the property in the Visibility documentation.

Let’s take an example of showing and hiding the button in JavaScript using the visibility property.

input type="button" id="btn-1" value="Show" onClick="hideAction()" /> input type="button" id="btn-2" value="Hide" onClick="hideAction()"/> 

let hidden = false;  function hideAction()   hidden = !hidden;  if (hidden)   document.getElementById('btn-1').style.visibility = 'hidden';  > else   document.getElementById('btn-1').style.visibility = 'visible';  > > 

We have defined two buttons in the example above. The first button will be shown and hidden based on the toggle button value.

The second button will toggle the visibility of the previous button.

Run the code snippet above in any browser that supports JavaScript; it will show the below result.

Use Display Property to Hide Button in JavaScript

The CSS display property determines whether an element is treated as a block or inline element and the layout used for its child elements, e.g., B. Flow, Grid, or Flex layout.

display: block; display: none; 

The Display property specifies an element’s interior and exterior display types. The external type determines an element’s participation in the flow layout; the inner type sets the child’s design.

Some display values are fully defined in their specifications. For example, what happens when the display: flex is declared is defined in the CSS flexbox model specification.

You can find more information about the property in the Display documentation.

Let’s take an example of showing and hiding the button in JavaScript using the display property.

input type="button" id="btn-3" value="Show" onClick="displayAction()" /> input type="button" id="btn-4" value="Toggle" onClick="displayAction()"/> 

function displayAction()   hidden = !hidden;  if (hidden)   document.getElementById('btn-3').style.display = 'none';  > else   document.getElementById('btn-3').style.display = 'block';  > > 

We have defined two buttons in the example above. The first button will be shown and hidden based on the toggle button value.

The second button will toggle the display property of the previous button.

Run the code snippet above in any browser that supports JavaScript; it will show the below result.

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

Related Article — JavaScript Button

Источник

Html hidden button click

Last updated: Jan 11, 2023
Reading time · 2 min

# Show/Hide a Form on button click using JavaScript

To show or hide a form on a button click:

1. Add a click event listener to the button element.
2. Each time the button is clicked check if the form element is hidden.
3. If the form is hidden, show it, otherwise hide the form.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> form id="form"> input type="text" /> input type="text" /> input type="text" /> form> button id="btn">Toggle form visibilitybutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const form = document.getElementById('form'); if (form.style.display === 'none')  // 👇️ this SHOWS the form form.style.display = 'block'; > else  // 👇️ this HIDES the form form.style.display = 'none'; > >); 

The style.display property removes the form from the DOM, if you want to make the form element invisible, but still take up space on the screen, scroll down to the example that uses the style.visibility property.

We added a click event listener to the button element.

On each click, we check if the form’s display property is set to none .

If the form is already hidden, we show it by setting its display property to block .

On the other hand, if the form is not hidden, we hide it by setting its display property to none .

We used the display property in the example. However, you might need to use the visibility property depending on your use case.

When an element’s display property is set to none , the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element’s visibility property is set to hidden , it still takes up space on the page, however, the element is invisible (not drawn). The element still affects the layout on your page as normal.

# Show/Hide a Form on button click using visibility

Here is an example that uses the visibility property to make the form element invisible, but still take up space on the page.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const form = document.getElementById('form'); if (form.style.visibility === 'hidden')  form.style.visibility = 'visible'; > else  form.style.visibility = 'hidden'; > >); 

If you click on the button element, you will see that the form becomes invisible, but the button doesn’t take its place on the page.

Even though the form element is not rendered, it still affects the layout on the page as normal.

When we used the display property to hide the form element, the button would take its place in the DOM as the form element got completely removed from the document.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник