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

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

• javascript
• html
• css

Share Improve this question Follow edited Aug 29, 2019 at 19:02 noo asked Aug 29, 2019 at 18:52 noonoo 14922 silver badges77 bronze badges 3

• Is that js part of your aud_play_pause() function? – justDan Commented Aug 29, 2019 at 18:54
• Where's the element referenced in document.getElementById("myTune")? Where's your attempt at hiding the button? – j08691 Commented Aug 29, 2019 at 18:55
• I just edited the code, sorry – noo Commented Aug 29, 2019 at 19:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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>

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./HappyBirthday.mp3"></audio>

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