Discussion :

[amine2208]

Bonjour

Tout d'abord voici mon code :

Code php :

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
 
<title> S1 - Test </title>
<?php
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
?>
<?php
$sql = $bdd->query( "SELECT choses FROM machins ");
$rep = $sql -> fetchAll() ;
foreach( $rep as $result  ){
echo
'<strong style="color:red;text-align:center;margin-left:100;" >  ' . $result["choses"] . '  </strong>
<button type="button"  onclick="test1(\'' . $result["choses"] . '\',this,aaa)" > tester  </button> 
<button type="button" id="aaa" style="display:none" > test 2 </button>
';
}
?>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function test1(param,objet,aaa)
{
var ospan = document.createElement('span') ;
var otext = document.createTextNode('yes') ;
ospan.appendChild( otext) ;
objet.parentNode.replaceChild( ospan, objet) ;
//la ligne ci dessous ne s'exécute pas , cela m'affiche une erreur "style a la valeur Null ou n'est pas un objet" :
aaa.style.display = "" ;
}
 
function test2()
{
//ici je voudrais que le span creer grace à la function test1 redevient le button qu'il était
}

voila j'ai deux problème :

1) cette ligne de mon code ne marche pas cela m'affiche "style a la valeur Null ou n'est pas un objet" :

Code :

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

 aaa.style.display = "" ;

2) je voudrais créer une function test2 qui fera en sorte que le span créer grâce à la function test1 redevient le button qu'il était

vous pouvez m'aidez svp ? merci

[Bovino]

Tout d'abord, merci de lire et appliquer Important : Les règles incontournables d'utilisation de ce forum : le code PHP ne nous intéresse pas, c'est le code HTML généré qui est utile !

Ensuite, ton paramètre aaa, tu le définis où ?

[sekaijin]

ben comme dit Bovino si tu ouvrais le source html dans ton navigateur tu y verrais plus clair.
voilà la chose

Code html :

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

1
2
<button type="button"  onclick="test1('une valeur de result',this,aaa)" > tester  </button> 
<button type="button" id="aaa" style="display:none" > test 2 </button>

et là on vois de suite que le 3eme paramètre passé à la fonction est null
aaa est une variable non définie.

ça n'a donc aucune change de marcher. je suppose vu que aaa est la valeur de l'id du bouton suivant que ce que tu voulait écrire est

Code html :

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

1
2
<button type="button"  onclick="test1('une valeur de result',this,'aaa')" > tester  </button> 
<button type="button" id="aaa" style="display:none" > test 2 </button>

ce coup ci le troisième paramètre est un id. donc à priori c'est Ok quaf que c'est du code généré en php dans un foreach. on a donc toute le chance de se retrouver avec plusieurs objets avec le même id.
c'est un problème que je te laisse régler

je vais faire comme si tu avais des id uniques.
dans ta fonction test1 le troisième paramètre est un id il faut donc récupérer l'objet

Code :

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

1
2
3
4
5
6
7
8
9
function test1(param,objet,id) //<= le paramètre est un id
{
  var ospan = document.createElement('span') ;
  var otext = document.createTextNode('yes') ;
  var aaa = document.getElementById(id); // <= ICI on récupère le bouton
  ospan.appendChild( otext) ;
  objet.parentNode.replaceChild( ospan, objet) ;
  aaa.style.display = "inline" ; // <= attention la valeur "" n'existe pas
}

Voici la liste des valeur possible pour display

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
none               The element will not be displayed at all
box (or flex-box)  The element is displayed as a block-level flex container box
block              The element is displayed as a block-level element (like paragraphs and headers)»
flex               The element is displayed as a block-level flex container box
inline             This is default. The element is displayed as an inline-level element (like span)
inline-block       The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex        The element is displayed as an inline-level flex container box
inline-table       The element is displayed as an inline-level table
list-item          The element is displayed as a list-item, which means that it has a bullet in front of it
table              The element is displayed as a table
table-caption      The element is displayed as a table caption
table-cell         The element is displayed as a table cell
table-column       The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row          The element is displayed as a table row
table-row-group    The element is displayed as a table row group
inherit            The value of the display property will be inherited from the parent element

A+JYT

[amine2208]

Tout d'abord, merci de lire et appliquer Important : Les règles incontournables d'utilisation de ce forum : le code PHP ne nous intéresse pas, c'est le code HTML généré qui est utile !

Ensuite, ton paramètre aaa, tu le définis où ?

Ah oui désolé j'ai copier coller sans faire gaffe désolé xD

bah là :

Code html :

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

 <button type="button" id="aaa" style="display:none" > test 2 </button>

[amine2208]

oui je passe l'id directement en paramètre normalement sur mes autres pages ça marche alors que c'est la même méthode , mais sur la page test ça bloque je sais pas pourquoi :/

et sur mes autre page le

Code :

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

 x.style.display = ""

marche aussi xD

[Bovino]

Ce que tu fais est une incohérence dont l'interprétation va dépendre du bon vouloir de l'interprétation du navigateur.

Dans l'appel de ta fonction

Code :

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

onclick="test1('une valeur de result',this,aaa)"

aaa est considéré comme une variable, variable qui n'a jamais été définie.
Certes, les navigateurs qui sont quelque peu permissifs arrivent à "comprendre" que tu cherches l'élément dont l'id est aaa mais ça reste une très mauvaise pratique qu'il faut absolument éviter et remplacer par la solution préconisée par sekaijin.

D'autant que cela laisse présager que tu es susceptible de commettre d'autres erreurs du même ordre, comme par exemple avoir plusieurs fois le même id dans la page (parce que affecter un attribut id dans une boucle foreach, c'est pas top...) ou d'avoir des attributs name avec cette valeur et dans ce cas, ça plante !

Il faut donc être plus rigoureux dans l'écriture de son code et respecter les règles de base.

[amine2208]

Ah d'accord je vois mais comment faire pour éviter d'avoir plusieur id dans une boucle foreach ? xD

[Bovino]

Tu n'as jamais entendu parler de la notion de compteur ?

[amine2208]

si j'y avais penser mais je sais pas comment faire pour l'integrer avec l'id , et je dois changer foreach par la boucle for ou comment faire ? xD

[sekaijin]

solution ne pas utiliser d'Id mais des références

Code html :

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

1
2
<button type="button"  onclick="test1('une valeur de result',this)" > tester  </button> 
<button type="button" style="display:none" > test 2 </button>

note que l'id à disparu et que le paramètre aussi

Code :

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

1
2
3
4
5
6
7
8
9
function test1(param,objet) //<= le paramètre id a disparu
{
  var ospan = document.createElement('span') ;
  var otext = document.createTextNode('yes') ;
  var aaa = this.nextSibling.nextSibling; // <= le bouton chercher est le tag suivant mais entre les deux il y a un text node (les espaces dans le code html)
  ospan.appendChild( otext) ;
  objet.parentNode.replaceChild( ospan, objet) ;
  aaa.style.display = "inline" ; // <= attention la valeur "" n'existe pas
}

c'est magique plus besoin d'id plus de problème de conflit.
mais ça dépends de la structure de ton HTML

A+JYT

[amine2208]

Merci pour ta réponse mais ça ne fait rien sauf quand j'écris :

Code :

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

  var aaa = this.nextSibling ;

ça fait apparaitre le label mais pas le button

par contre voici mon nouveau code ça marche à quelque détail près :

Code php :

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

1
2
3
4
5
6
7
8
<?php
echo
' <strong style="color:red;text-align:center;margin-left:100;" >  ' . $result["choses"] . '  </strong>
<button type="button" id="test" onclick="test1(\'' . $result["choses"] . '\',this);" >tester</button>
<span id="testText" style="display: none;"> yes </span>
<button type="button" id="test2" onclick="test2(\'' . $result["choses"] . '\',this);" style="display: none;"> tester 2 </button>';
}
?>

Code :

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

1
2
3
4
5
6
7
8
9
10
function test1(param,objet) {
	objet.style.display = "none";
	document.getElementById("testText").style.display = "inline";
	document.getElementById("test2").style.display = "inline";
}
function test2(param,objet) {  
    document.getElementById("test").style.display = "inline";
    document.getElementById("testText").style.display = "none";
    objet.style.display = "none";
}

mais voici ce que ça donne si par exemple je clique sur le bouton "tester" de "truck3" :




ça se place au mauvais endroit

en + quand je clique sur le bouton "test2" ça donne :



tout disparait xD

[sekaijin]

encore une fois poste ton code html (view source dans le navigateur pas le code php)

je ne sais pas comment est fait ton HTML mais si c'est bien deux balise button successive ça ne peut que marcher.
voici ce que j'ai fais pour vérifier

j'ai ouvert chrome sur la page google. j'ai ouvert la console js et j'ai sélectionné un div

Code :

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

b = document.getElementById("card-slider-frame");

j'y ai inséré le code html que je pense être celui que tu génère en php (mais ne l'ayant pas ...)

Code :

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

b.innerHTML='<button type="button"  onclick="console.log(test1(null,this));" > tester 1 </button><button type="button" style="display:none" > test 2 </button> ==> <button type="button"  onclick="console.log(test1(null,this));" > tester 3 </button><button type="button" style="display:none" > test 4 </button>';

j'obtiens alors le html suivant

Code html :

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

1
2
3
4
5
6
7
<div id="card-slider-frame" class="showing-login-area">
  <button type="button" onclick="console.log(test1(null,this));"> tester 1 </button>
  <button type="button" style="display: none;"> test 2 </button> 
  ==&gt;
  <button type="button" onclick="console.log(test1(null,this));"> tester 3 </button>
  <button type="button" style="display: none;"> test 4 </button>
</div>

et chrome affiche un bouton "test 1", " ==> " et un bouton "test 2"
un click sur "test 1" fait apparaître juste à côté le bouton "test 2", un click sur "test 3" fait apparaître juste à côté le bouton "test 4"

la fonction test1 étant

Code :

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

1
2
3
4
function test1(param,objet){
  objet.nextElementSibling.style.display="inline"; 
  return objet.nextElementSibling;
}

comme Bovino l'a dit seul le code HTML généré importe tant qu'on n'a pas sa structure on ne peu que supposer.
A+JYT

[Matthieu2000]

Code php :

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
<?php
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
?>
<?php
$sql = $bdd->query( "SELECT choses FROM machins ");
$rep = $sql -> fetchAll() ;
$indice_id=0;
foreach( $rep as $result  ){
echo
' <div id="div_'.$indice_id.'"><strong style="color:red;text-align:center;margin-left:100;" >  ' . $result["choses"] . '  </strong>
<button type="button" id="b1_'.$indice_id.'" onclick="test1(\'' . $result["choses"] . '\',this);" >tester</button>
<span id="testText'.$indice_id.'" style="display: none;"> yes </span>
<button type="button" id="b2_'.$indice_id.'" onclick="test2(\'' . $result["choses"] . '\',this);" style="display: none;"> tester 2 </button>';
 
$indice_id=$indice_id+1;
}
?></div>

doit donner des id différents

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="div_0"><strong style="color:red;text-align:center;margin-left:100;" >  titi  </strong>
<button type="button" id="b1_0" onclick="test1('titi',this);" >tester</button>
<span id="testText0" style="display: none;"> yes </span>
<button type="button" id="b2_0" onclick="test2('titi',this);" style="display: none;"> tester 2 </button>
 
<div id="div_1"><strong style="color:red;text-align:center;margin-left:100;" >  toto  </strong>
<button type="button" id="b1_1" onclick="test1('toto',this);" >tester</button>
<span id="testText1" style="display: none;"> yes </span>
<button type="button" id="b2_1" onclick="test2('toto',this);" style="display: none;"> tester 2 </button>

Code :

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

1
2
var aaa = this.parentNode.getElementsByTagname('button')[1];//parentNode c'est le calque , puis on prend le deuxième bouton
aaa = this.parentNode.getElementById('b2_'+indice_id);//si tu utilise les indices

[amine2208]

sekaijin voici le code source de la page :

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
<title> S1 - Test </title>
<strong style="color:red;text-align:center;margin-left:100;" >  truck1  </strong>
<button type="button" id="test" onclick="test1('truck1',this);" >tester</button>
<span id="testText" style="display: none;"> yes </span>
<button type="button" id="test2" onclick="test2('truck1',this);" style="display: none;"> tester 2 </button>
<strong style="color:red;text-align:center;margin-left:100;" >  truck2  </strong>
<button type="button" id="test" onclick="test1('truck2',this);" >tester</button>
<span id="testText" style="display: none;"> yes </span>
<button type="button" id="test2" onclick="test2('truck2',this);" style="display: none;"> tester 2 </button>
<strong style="color:red;text-align:center;margin-left:100;" >  truck3  </strong>
<button type="button" id="test" onclick="test1('truck3',this);" >tester</button>
<span id="testText" style="display: none;"> yes </span>
<button type="button" id="test2" onclick="test2('truck3',this);" style="display: none;"> tester 2 </button>
<strong style="color:red;text-align:center;margin-left:100;" >  truck4  </strong>
<button type="button" id="test" onclick="test1('truck4',this);" >tester</button>
<span id="testText" style="display: none;"> yes </span>
<button type="button" id="test2" onclick="test2('truck4',this);" style="display: none;"> tester 2 </button>

Code :

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

1
2
3
4
5
6
7
8
9
10
function test1(param,objet) {
    	objet.style.display = "none";
	document.getElementById("testText").style.display = "inline";
	document.getElementById("test2").style.display = "inline";
}
function test2(param,objet) {  
    document.getElementById("test").style.display = "inline";
    document.getElementById("testText").style.display = "none";
    objet.style.display = "none";
}

Matthieu2000, ça ne marche pas

[sekaijin]

Code :

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

1
2
3
4
5
6
7
8
9
10
function test1(param,objet) {
    	objet.style.display = "none";
	objet.nextElementSibling.style.display = "inline";
	objet.nextElementSibling.nextElementSibling.style.display = "inline";
}
function test2(param,objet) {  
    objet.previewElementSibling.previewElementSibling.style.display = "inline";
    objet.previewElementSibling.style.display = "none";
    objet.style.display = "none";
}

testé avec ton code html sans pb

A+JYT

[Matthieu2000]

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
<script>
function test1(param,objet,indice) //<= le paramètre est un id
{
  document.getElementById("testText"+indice).style.display = "inline";
  objet.style.display = "none";
 
  var aaa = document.getElementById('b2_'+indice); 
  aaa.style.display = "inline" ; 
}
function test2(param,objet,indice) {  
    document.getElementById("b1_"+indice).style.display = "inline";
    document.getElementById("testText"+indice).style.display = "none";
    objet.style.display = "none";
}
 
</script>
 
<?php
$indice_id=0;
for( $i=0;$i<4;$i++  ){
echo
' <div id="div_'.$indice_id.'">'.
        '<strong style="color:red;text-align:center;margin-left:100;" >  ' . 'titi'. '  </strong>'.
        '<button type="button" id="b1_'.$indice_id.'" onclick="test1(\'' .'titi' . '\',this,'.$indice_id.');" >tester</button>'.
        '<span id="testText'.$indice_id.'" style="display: none;"> yes </span>'.
        '<button type="button" id="b2_'.$indice_id.'" onclick="test2(\'' .'titi' . '\',this,'.$indice_id.');" style="display: none;"> tester 2 </button>'.
'</div>';
 
$indice_id=$indice_id+1;
}
?>

code généré

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
<script>
function test1(param,objet,indice) //<= le paramètre est un id
{
  document.getElementById("testText"+indice).style.display = "inline";
  objet.style.display = "none";
  var aaa = document.getElementById('b2_'+indice); 
  aaa.style.display = "inline" ;
}
function test2(param,objet,indice) {  
    document.getElementById("b1_"+indice).style.display = "inline";
    document.getElementById("testText"+indice).style.display = "none";
    objet.style.display = "none";
}
 
</script>
 
 <div id="div_0">
<strong style="color:red;text-align:center;margin-left:100;" >  titi  </strong><button type="button" id="b1_0" onclick="test1('titi',this,0);" >tester</button><span id="testText0" style="display: none;"> yes </span><button type="button" id="b2_0" onclick="test2('titi',this,0);" style="display: none;"> tester 2 </button></div> 
 
<div id="div_1"><strong style="color:red;text-align:center;margin-left:100;" >  titi  </strong><button type="button" id="b1_1" onclick="test1('titi',this,1);" >tester</button><span id="testText1" style="display: none;"> yes </span><button type="button" id="b2_1" onclick="test2('titi',this,1);" style="display: none;"> tester 2 </button></div> 
 
<div id="div_2"><strong style="color:red;text-align:center;margin-left:100;" >  titi  </strong><button type="button" id="b1_2" onclick="test1('titi',this,2);" >tester</button><span id="testText2" style="display: none;"> yes </span><button type="button" id="b2_2" onclick="test2('titi',this,2);" style="display: none;"> tester 2 </button></div>
 
 
 <div id="div_3"><strong style="color:red;text-align:center;margin-left:100;" >  titi  </strong><button type="button" id="b1_3" onclick="test1('titi',this,3);" >tester</button><span id="testText3" style="display: none;"> yes </span><button type="button" id="b2_3" onclick="test2('titi',this,3);" style="display: none;"> tester 2 </button></div>

Qu'est ce qui ne marche pas?

[amine2208]

Ah là ça marche merci mais comment faite pour que au lieu de "titi" il y ait

Code php :

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

 <strong style="color:red;text-align:center;margin-left:100;" >  ' . $result["choses"] . '  </strong>

??

[amine2208]

j'ai trouvé la soluce merci tout le monde