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>

**cincap** · 08/05/2014, 17h42

@ sekaijin, chapeau bas cher ami, j'ai examiné ton code afin de voir ou était l'erreur pour ne pas copier sans comprendre.

Ta solution est excellente.

Je peus fermer ce topic.

Grand merci.

@+,

Cincap

**cincap** · 08/05/2014, 17h51

@ sekaijin, je viens de constater à l'instant que la 1ère fois au chargement de la page, il faut cliquer deux fois sur le bouton pour entendre le son et voir le "Stop".

A l'occasion si tu sais pourquoi.

@+,

Cincap

**sekaijin** · 08/05/2014, 18h48

j'ai aussi corrigé une erreur dans la balise bgsound

Code :

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

 <bgsound id="sonbis" name="son" src=""></bgsound>

l'as tu repotorté ?

sans ça l'attribut src n'est pas défini la première foi

A+JYT

**cincap** · 08/05/2014, 20h24

C'était bien cela mon erreur, j'avais loupé cette petite modification, trop content que cela fonctionnait avec un seul bouton.

Chapeau bas et encore merci pour tes réponses.

@+,

cincap

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

Bonjour à toutes et à tous,

@ sekaijin, j'ai un petit Barr graph au format gif (soundon.gif), pour qu'il fonctionne avec ta solution, je dois l'insérer dans le code Jvs ou dans la partie "body".

En position off il ne doit pas être afficher, dès le click sur "Play" il doit s'afficher.

As tu une idée.

en te remerciant encore pour ta patience.

@+,

Cincap

**cincap** · 09/05/2014, 09h52

@ sekaijin,

Voila mon test avec l'image, cela fonctionne mais si il y a une erreur de professionnalisme, n'hésitez pas.

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
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<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êt de la musique !"
bgsound.setAttribute("src","Musique/sound1.mid");
//affichage de l'image
document.getElementById("bg").style.visibility="visible"; } 
else {
//il faut afficher le bouton Play et arrêter le son
btn.innerHTML = "Play";
btn.title="Lecture de la musique !"
bgsound.setAttribute("src","");
//image cachée
document.getElementById("bg").style.visibility="hidden";
}
}
  </script><bgsound
 id="sonbis" name="son" src=""></bgsound>
</head>
<body
 style="background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%; height: 
 
750px; background-image: url(none);">
<button id="Play_Stop" title="Lecture de la musique !"
 onclick="return sound(this);">Play</button>
<br>
<br>
<img id="bg" src="soundon.gif" ; style="position: absolute; right: 145px; top: 725px; visibility: hidden;">

@+,

Cincap

Rendre le bouton invisible après le onclick !

JavaScript

Discussions similaires

Partager

Partager