Tips for concealing a button post-click

Just updated my code, please take a look!

I have created a button using HTML, CSS, and JavaScript and I am trying to figure out how to hide it once it's clicked.

Below is the HTML for the button that should play music when clicked:

<audio id="mySong" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>

<button type="button" onclick="playPause()">&#9658</button>

CSS Styles

body { background: black; }
button {
  background: rgba(255,255,255,0.8);
  border: 0;
  padding: 10px 25px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 5px gray;
  outline: none;
  cursor: pointer;
  }

button:active {
  background: #DDDDDD;
  color: #222222;
  border-bottom: 0;
  box-shadow: 0 3px #555555;
  margin-top: 2px;
  }

Javascript Function

function playPause() {
  var audio = document.getElementById("mySong");
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}
javascripthtmlcss

Answer №1

To hide the button element, simply utilize the hidden property.

See an example in action:

<button onclick="hideButton(this)">
  Click Me
</button>

<script>
  const hideButton = (element) => {
    element.hidden = true;
  }
</script>

Just to explain further, I am passing the reference to the element (this) as a parameter to the click-triggered function. Within the function, the reference is accessed as element and the hidden property is set to true, preventing the browser from displaying it.

Answer №2

To hide elements on a webpage, you have several options: Css 1. Use the style property with display:none 2. Use the style property with visibility:hidden Js You can also use JavaScript to hide an element by setting its hidden property to true.

function hide(){

var button=document.getElementById('hide');
button.style.display="none";

}
button{
display:block;

}
<button id="hide" onClick="hide()">play</button>

Answer №3

Here is a helpful tip: Implement this piece of code to hide the element you specify. Simply set the display property to 'none'. elem.style.display = 'none' It might not cover all scenarios, but it's a good starting point.

function aud_play_pause(elem) {
  var myAudio = document.getElementById("myTune");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
  elem.style.display = 'none'
}
body { background: black; }
button {
  background: rgba(255,255,255,0.8);
  border: 0;
  padding: 10px 25px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 5px gray;
  outline: none;
  cursor: pointer;
  }

button:active {
  background: #DDDDDD;
  color: #222222;
  border-bottom: 0;
  box-shadow: 0 3px #555555;
  margin-top: 2px;
  }
<audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>

<button type="button" onclick="aud_play_pause(this)">&#9658</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

javascriptjqueryhtmlcss

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

At the moment, I currently have this input field set up on an HTML page within my Angular 9 application: <input type="text" formControlName="amountToWithholdInput" onkeyup="this.value = this.value.replace(/[^0-9.%$]/, &ap ...

htmlregexangularcurrencypercentage

Steps for transforming an array of objects into an array of values based on a specific key

Is there a way to extract messages based on keywords from a JSON structure? Here is an example of the JSON structure: [{ _id: 123, message: 'hello', username: '1' }, { _id: 456, message: 'world', username: '2'}] I ...

javascriptjson

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

Does running npm install automatically compile the library code as well?

I have a query regarding npm and its functionality. I also posted the same question on Reddit, but haven't received a satisfying answer yet. Let's use the jQuery npm package as a case study. Upon running the command npm install jquery, I notic ...

javascriptjquerynode.jsnpm

Using template expressions to access properties that contain spaces

Here is the code structure that I am working with: "name": { "age": [ { "data": { "how old": "23" } }, One of my JSON keys has a space in it. How can I access this pr ...

javascripthtmlangular

ng-if directive in AngularJs will not function properly if the condition text includes a space

I encountered an issue while attempting to set values in AngularJS UI grid based on the row.entity values. To address this, I created a cellTemplate that evaluates the row values and applies text styling accordingly. Code Snippet var statusTemplate=&apos ...

javascriptangularjsangular-ng-if

IE8 is encountering a null JSON response from the HTTP handler, unlike IE10 and Chrome which are not experiencing this

Here is my JavaScript code snippet: patients.prototype.GetPatient = function(patient_id,callback) { var xmlhttp; var fullpath; try { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { ...

javascriptjsoninternet-explorerinternet-explorer-8

Creating resizable SVG elements using HTML or CSS for dynamic width and height

Is there a way to give my SVG element dynamic width and height in order to display the entire SVG image? For example, take a look at this CodePen link. <svg width="250" height="250" viewBox="0 0 250 250"> Alternatively, .svg { width : 250px; ...

htmlcsssvg

Having trouble inputting text into the text area using Selenium WebDriver with C#

Here is the original code snippet: I am having trouble entering text in the text box below. Can you please help me figure out how to enter text in this text box? <td id="ctl00_cRight_ucSMS_redSMSBodyCenter" class="reContentCell" ...

javascriptc#seleniumselenium-webdrivercss-selectors

When the source file is located in other directories, gcovr fails to generate a comprehensive report

I'm having trouble getting the correct HTML output from gcovr when the source file is located relative to my root directory. Let me illustrate with two cases where gcovr works and where it encounters issues: CASE:1 - Successful execution of gcovr Af ...

htmlrelative-pathgcovcpputestgcovr

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

I'm attempting to fetch the top 5 NFT collections based on volume and display them in a table format. However, I'm facing an issue where the data is not being mapped correctly and when I click the "get" button, all content on the webpage disappea ...

javascriptreactjsjsonapifrontend

Personalized JavaScript Arrays

Seeking assistance to format data received from an API. Can anyone provide guidance? fields: [ { name: "A", values: { data: [1, 2, 3, 4, 5] } }, { name: "B", values: { data: [6 ...

javascriptreactjsarraysjson

The links are displaying on separate lines instead of being inline

There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...

htmlcss

The Reactjs application is failing to display the real-time data produced by the state

I am encountering an issue with looping through a JavaScript array of objects on a ReactJS component. Upon inspecting the Chrome browser console, the following output is displayed from console.log --- 0: {id: 1, title: "This is a post 1"} 1: {id: ...

javascriptjsonreactjsaxiospublic

Make sure to adjust the original router URL when the application is being run within iframe or object

Currently, I am embedding Vue apps within object tags or iframes of a master Vue app container. Initially, I set up a file server that serves the container or the requested sub-app to render inside a div. Below, I will show the necessary routing of my Nod ...

javascripthtmlnode.jsexpressvue.js

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

javascriptnode.jsaws-lambdaamazon-dynamodb

jQuery wrapAll issue

I have a repeating group of three divs in my code that I need to wrap together. Here's an example from my HTML: <div class="one" /> <div class="two" /> <div class="three" /> <div class="one" /> <div class="two" /> <d ...

javascriptjqueryhtml

The element 'x' is implicitly bound with a type of 'any'

I've been exploring the world of Nextjs and TypeScript in an attempt to create a Navbar based on a tutorial I found (). Although I've managed to get the menu items working locally and have implemented the underline animation that follows the mou ...

javascriptreactjstypescriptnext.js

The functionality of Bootstrap DataTable Sparkline is compromised when the table is configured to be responsive

I am working with a Bootstrap DataTable that includes a sparkline in the last column. Here is the complete JavaScript code: $(document).ready(function() { var groupColumn = 0; let table = $('#example').DataTable({ //responsive: true, ...

javascriptdatatablesasp.net-core-mvcbootstrap-5sparklines