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

Fixing the alignment of the left column table in Bootstrap 3.3.7

Disabling the scrollbar within angular elements

Using Threejs JSONLoader and OOP to easily add models to a scene post-loading

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

Saving information on localStorage is not possible

Eliminate the white background from the modal image

The PHP page is not receiving the variable passed through AJAX

Alter the hues of the triangles on a threeJS plane

Trouble with executing jQuery $.ajax post to PHP within the same file

Align two images to the center while displaying them in individual rows

The act of appending values to an array within a hash in Vue is not functioning as expected

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

Craft a stunning transparent border effect using CSS

Obtaining a date and time in PHP from a JavaScript array

Ways to Read JSON without Using jQuery

Commitment of service within AngularJS controller using the "as" syntax

Using Selenium in Java, one can wait for a JavaScript event (such as onchange) to finish before proceeding

An error occurs even before any Components are rendered, with a TypeError stating that the property 'type' cannot be read because it is undefined

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?