How to hide a button after click

Question

Edited my code, sorry for that!

I made a button using HTML, CSS and Javascript and I'd like to know to hide it when clicked.

Here's the HTML, it's supposed to play music when you click on play.

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

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

CSS

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 aud_play_pause() {
  var myAudio = document.getElementById("myTune");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

Where's the element referenced in document.getElementById("myTune")? Where's your attempt at hiding the button? — j08691
– j08691, Commented Aug 29, 2019 at 18:55

Telmo Trooper · Accepted Answer · 2019-08-29 19:02:48Z

4

Just use the hidden property of the button element.

Working example:

<button onclick="hello(this)">
  Hey
</button>

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

Just to clarify what I did there, I'm passing the reference to the element (this) as a parameter to the function which is triggered on click. When the function is called it reads the reference as element and sets the property hidden as true, so the browser will stop rendering it.

edited Aug 29, 2019 at 19:02

answered Aug 29, 2019 at 18:55

Telmo Trooper

5,7942 gold badges33 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

noo Over a year ago

Would you please tell me how to use it on my code, I can't add it properly. Thanks for the answer though!!

Telmo Trooper Over a year ago

Change onclick="aud_play_pause()" to onclick="aud_play_pause(this)", add a parameter to the function declaration (ex: function aud_play_pause(element)) and call element.hidden = true inside the function.

Telmo Trooper Over a year ago

I added a clarification the to end of my answer to explain it a little more in-depth.

Balaji · Accepted Answer · 2019-08-29 19:01:29Z

1

You can use style Properties Css 1.display:none 2.visibility:none Js element.hidden = true;

function hide(){

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

}

button{
display:block;

}

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

answered Aug 29, 2019 at 19:01

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Comments

Pankaj Shukla · Accepted Answer · 2019-08-29 19:14:57Z

Try this: This is how you can use it in your code. You need to pass the reference to the element you want to hide. Then
elem.style.display = 'none' Not sure your exact use case but this could be a start.

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>

Collectives™ on Stack Overflow

How to hide a button after click

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related