时间戳

首页 > 解决方案 > 点击后如何隐藏按钮

javascript - 点击后如何隐藏按钮

问题描述

编辑了我的代码，对不起！

我使用 HTML、CSS 和 Javascript 制作了一个按钮，我想知道在单击时隐藏它。

这是HTML，它应该在您单击播放时播放音乐。

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

标签： javascripthtmlcss

解决方案

只需使用按钮元素的隐藏属性。

工作示例：

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

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

只是为了澄清我在那里做了什么，我将对元素 ( this) 的引用作为参数传递给单击时触发的函数。当函数被调用时，它读取引用element并将属性设置hidden为 true，因此浏览器将停止渲染它。

推荐阅读