Is there a way to hide a button on this virtual keyboard after it has been clicked?

Question

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far:

function hideButton() {
var button = document.getElementById("simple_button");
if (button.style.display === "none") {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

javascript css html

Answer 1

Answer №1

Exploring the solution further, grooveplex pointed out that without reviewing your complete markup and css, providing a precise answer is challenging. But don't worry, we understand this is your first time here.

If you wish to hide a button once it's clicked, you can achieve this by attaching a click event listener to all buttons and assigning a specific class to the clicked button. This class can then be styled accordingly for the desired post-click appearance. Using 'visibility: hidden' would likely be ideal as it maintains the visual keyboard's structure.

// acquire all buttons
var documentButtons = document.getElementsByTagName('button');
// attach an event listener to all buttons
for (var i = documentButtons.length - 1; i >= 0; i--) {
    documentButtons[i].addEventListener('click', removeButton);
}
// function to remove the button (cross browser)
function removeButton(e) {
    // define variables
    var name, arr;
    // class name definition
    name = "hidden";
    // where to add the class name
    arr = e.target.className.split(" ");
    // adding the class name
    if (arr.indexOf(name) == -1) {
        e.target.className += " " + name;
    }
}

.hidden {
    visibility: hidden;
}

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>

Answer 2

Exploring the solution further, grooveplex pointed out that without reviewing your complete markup and css, providing a precise answer is challenging. But don't worry, we understand this is your first time here.

If you wish to hide a button once it's clicked, you can achieve this by attaching a click event listener to all buttons and assigning a specific class to the clicked button. This class can then be styled accordingly for the desired post-click appearance. Using 'visibility: hidden' would likely be ideal as it maintains the visual keyboard's structure.

// acquire all buttons
var documentButtons = document.getElementsByTagName('button');
// attach an event listener to all buttons
for (var i = documentButtons.length - 1; i >= 0; i--) {
    documentButtons[i].addEventListener('click', removeButton);
}
// function to remove the button (cross browser)
function removeButton(e) {
    // define variables
    var name, arr;
    // class name definition
    name = "hidden";
    // where to add the class name
    arr = e.target.className.split(" ");
    // adding the class name
    if (arr.indexOf(name) == -1) {
        e.target.className += " " + name;
    }
}

.hidden {
    visibility: hidden;
}

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>

Is there a way to hide a button on this virtual keyboard after it has been clicked?

Answer №1

Similar questions

Angular reactive form encountered an issue with an incorrect date being passed

Text fields do not show a cursor icon

Adjustable width for flexbox column

The JavaScript and CSS properties are not functioning properly with the HTML text field

Is Javascript necessary for submitting a form to a PHP script?

Is there a way to align my green button beside the red button instead of below it?

Unable to set up npm for node-resemble on macOS

Is it possible to merge two HTML selectors using jQuery?

Click to add a different template into the document

The SVG image does not display in browsers other than Internet Explorer (IE)

Tips on retrieving an item using jQuery's select2 plugin

Adjust the display of inline-block divs to disregard line breaks

Using the Position Sticky feature in Next.js

What is the best way to test the validity of a form while also verifying email availability?

Searching for a solution on how to retrieve data server-side in the newest version of Next.js? Attempted to use getStaticProps but encountering issues with it not executing

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Ways to align one child to the end without affecting any other elements

Avoiding the occurrence of moiré patterns when using pixi.js

The CSS does not get applied to the returned element in Next JS

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext