CODEWITHSUNDEEP
javascripthtmlcss
noo
noo

Reputation: 149

How to hide a button after click

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();
  }
}

Upvotes: 1

Views: 5885

Answers (3)

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

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>

Upvotes: 0

Telmo Trooper
Telmo Trooper

Reputation: 5694

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.

Upvotes: 4

Balaji
Balaji

Reputation: 11017

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>

Upvotes: 1

Related Questions