Rendre le bouton invisible après le onclick !

**cincap** · 08/05/2014, 09h16

Bonjour à toutes et à tous,

Je ne sais pas si ce sujet à sa place en css ou javascript.

Sur ma page, j'ai deux boutons qui commande la balise "bgsound", un pour le play, l'autre pour le stop.

J'aimerai que lorsque je clique sur le bouton "Stop" qu'il soit invisible pour faire apparaitre le bouton "Play" comme cela, je pourrai les superposer.

J'ai essayé avec le style et hidden et pas d'effet.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<bgsound id="son" name="son" src="Musique/sound1.mid"></bgsound>
</head>
<body style="height: 750px;">
<button
 style="position: absolute; height: 20px; top: 750px; right: 100px; width: 53px;"
 name="stop" value="Stop" title="Arr&ecirc;t de la musique !"
 onclick='document.getElementById("son").src="";'>Stop</button>
<button
 style="position: absolute; height: 20px; top: 750px; left: 100px; width: 53px;"
 name="Play" value="Play" title="Lecture de la musique !"
 onclick='document.getElementById("son").src="Musique/sound1.mid";'>Play</button>

Merci pour l'aide éventuelle.

@+,

Cincap

**sekaijin** · 08/05/2014, 11h31

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<  onclick="this.style.visibility='hidden';"  >

**cincap** · 08/05/2014, 13h21

@ sekaijin, merci de ta réponse, avec une petite fonction j'arrive à peu près a ce que j'aurai aimé comme résultat.

Le bouton "Stop" est visible et "Play" est caché.

Je clique sur le bouton "Stop", mon son s'arrête et le bouton "Play" s'affiche.

Mon souhait est que lorsque je clique sur le bouton "Stop", mon son s'arrête et le bouton "Play" s'affiche mais "Stop" doit être caché.

Si je clique sur le bouton "Play", mon son se fait entendre et le bouton "Stop" s'affiche et "Play" doit être caché

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 <script language="javascript">
function newwindow() {
var showme = document.getElementById("son");
showme.style.visibility = "visible";
}
  </script>
  <bgsound id="sonbis" name="son"
 src="Musique/sound1.mid"></bgsound>
</head>
<body style="height: 750px;">
<button id="son"
 style="position: absolute; height: 20px; top: 750px; right: 100px; width: 53px; visibility: hidden;"
 name="Play" value="Play" title="Lecture de la musique !"
 onclick='document.getElementById("sonbis").src="Musique/sound1.mid";'>Play</button>
<button id="son"
 style="position: absolute; height: 20px; top: 750px; right: 170px; width: 53px;"
 name="Stop" value="Stop" title="Arr&ecirc;t de la musique !"
 onclick='document.getElementById("sonbis").src="";newwindow()'>Stop</button>

Il y a certainement moyen de faire plus court.

@+,

Cincap

**sekaijin** · 08/05/2014, 14h02

dans ce cas fais qu'un seul bouton

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <script language="javascript">
  function sound() {
    var bgsound = document.getElementById("sonbis");
    if ("" == bgsound.src) {
      //il faut afficher le bouton Stop et jouer le son
      this.innerHtml = "Stop";
      this.title="Arr&ecirc;t de la musique !"
      bgsound.src="Musique/sound1.mid";
    } else {
      //il faut afficher le bouton Play et arrêter le son
      this.innerHtml = "Play";
      this.title="Lecture de la musique !"
      bgsound.src="";
    }
  }
  </script>
  <bgsound id="sonbis" name="son"></bgsound>
</head>
<body style="height: 750px;">
  <button id="Play_Stop"  title="Lecture de la musique !" onclick='return sound(this);'>Play</button>
</body>

**cincap** · 08/05/2014, 16h22

@ sekaijin, grand merci pour cette solution, j'ai testé j'ai bien le bouton avec "Play" au départ, je clique j'ai le son mais même si le son est arrêté, le nom du bouton ne change pas en "Stop".

C'est peut être normal car je teste en local ?

A moins que j'ai loupé quelque chose.

@+,

Cincap

**sekaijin** · 08/05/2014, 17h15

sorry j'ai écrit trop vite sans vérifier

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script language="javascript">
  function sound(btn) {
    var bgsound = document.getElementById("sonbis");
    if ("" == bgsound.getAttribute("src")) {
      //il faut afficher le bouton Stop et jouer le son
      btn.innerHTML = "Stop";
      btn.title="Arr&ecirc;t de la musique !"
      bgsound.setAttribute("src","Musique/sound1.mid");
    } else {
      //il faut afficher le bouton Play et arrêter le son
      btn.innerHTML = "Play";
      btn.title="Lecture de la musique !"
      bgsound.setAttribute("src","");
    }
  }
  </script>
  <bgsound id="sonbis" name="son" src=""></bgsound>
</head>
<body style="height: 750px;">
  <button id="Play_Stop"  title="Lecture de la musique !" onclick='return sound(this);'>Play</button>
</body>
</html>

Rendre le bouton invisible après le onclick !

JavaScript

Vue hybride

Discussions similaires

Partager

Partager