cloneNode et incrementation des id

Version imprimable

Bonjour,

j'utilise cloneNode pour "dupliquer" un conteneur dont l'ID est incrémenté par un compteur. Cela fonctionne correctement; "conteneur" devient "conteneur1". La div conteneur "contient" 4 objets alpha, beta, gama, delta.
Est-il possible que les ID de ces objets soit également incrémentés pendant le clonage ie alpha1, beta1, gama1, delta1 ?
Merci

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<meta charset="UTF-8">
<link href="master.css" rel="stylesheet" />
</head>
 
<body>
 
<script>
var _counter = 0; 
document.getElementById("ligne").value ="1";
 
function Add() {
if(document.getElementById("ligne").value == "1"){
        _counter++;
    var oClone = document.getElementById("conteneur").cloneNode(true); 
    oClone.id += (_counter);
        document.getElementById("conteneur").appendChild(oClone);
        
        var domElement = document.getElementById('alpha');
        domElement.id.value = domElement.id.value + '1';
        domElement.style.position = 'absolute';
        domElement.style.top = 200;
        domElement.style.left = 10;
        domElement.style.backgroundColor = document.getElementById('alpha').style.backgroundColor;
        var domElement = document.getElementById('beta');
        domElement.style.position = 'absolute';
        domElement.style.top = 200;
        domElement.style.left = 30;
        domElement.style.backgroundColor = document.getElementById('beta').style.backgroundColor;
        var domElement = document.getElementById('gama');
        domElement.style.position = 'absolute';
        domElement.style.top = 220;
        domElement.style.left = 10;
        domElement.style.backgroundColor = document.getElementById('gama').style.backgroundColor;
        var domElement = document.getElementById('delta');
        domElement.style.position = 'absolute';
        domElement.style.top = 220;
        domElement.style.left = 30;
        domElement.style.backgroundColor = document.getElementById('delta').style.backgroundColor;
        document.getElementById("ligne").value ="2";
        }
   
}
</script>
 
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'red';
" value="red ">
<input type="button" onClick="
document.getElementById('beta').style.backgroundColor = 'blue';
" value="blue ">
 
<input type="button" onClick="Add()" value="Click! ">
Ligne: <input id="ligne" type="text" value = "1" >
 
<div id='conteneur' style="position:relative">
<P class="verif" id='alpha' style="position:absolute; left:10px; top:50px;" ></P>
<P class="verif" id='beta' style="position:absolute; left:30px; top:50px;" ></P>
<P class="verif" id='gama' style="position:absolute; left:10px; top:70px;" ></P>
<P class="verif" id='delta' style="position:absolute; left:30px; top:70px;" ></P>
</div>
 
 
 
</body>
</html>

26/01/2021, 12h15
javatwister

Oui.
26/01/2021, 12h23
SpaceFrog

mais pas avec

Code:

id.value

Bonjour,
Merci de votre réponse rapide et concise :-)

j'ai ajouté un bout de code qui me permet d'obtenir des id différents, omega4, omega5, omega6, omega7
Ce n'est pas tout à fait ce que je souhaitait (alpha1, beta1, gama1, delta1) mais j’essaierai de me débrouiller avec ça!

Merci de votre contribution.

Dois-je passer ma question en résolu ?

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<meta charset="UTF-8">
<link href="master.css" rel="stylesheet" />
</head>
 
<body>
 
<script>
var _counter = 0; 
document.getElementById("ligne").value ="1";
 
function Add() {
if(document.getElementById("ligne").value == "1"){
        _counter++;
    var oClone = document.getElementById("conteneur").cloneNode(true); 
    oClone.id += (_counter);
        document.getElementById("conteneur").appendChild(oClone);
        
        var domElement = document.getElementById('alpha');
        domElement.id.value = domElement.id.value + '1';
        domElement.style.position = 'absolute';
        domElement.style.top = 200;
        domElement.style.left = 10;
        domElement.style.backgroundColor = document.getElementById('alpha').style.backgroundColor;
        var domElement = document.getElementById('beta');
        domElement.style.position = 'absolute';
        domElement.style.top = 200;
        domElement.style.left = 30;
        domElement.style.backgroundColor = document.getElementById('beta').style.backgroundColor;
        var domElement = document.getElementById('gama');
        domElement.style.position = 'absolute';
        domElement.style.top = 220;
        domElement.style.left = 10;
        domElement.style.backgroundColor = document.getElementById('gama').style.backgroundColor;
        var domElement = document.getElementById('delta');
        domElement.style.position = 'absolute';
        domElement.style.top = 220;
        domElement.style.left = 30;
        domElement.style.backgroundColor = document.getElementById('delta').style.backgroundColor;
        document.getElementById("ligne").value ="2";
        }
        
        var list = document.getElementsByClassName("verif");
  for (var i = 4; i < list.length; i++) {
   list[i].setAttribute("id", "omega" + i);
  }
   
}
</script>
 
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'red';
" value="red ">
<input type="button" onClick="
document.getElementById('beta').style.backgroundColor = 'blue';
" value="blue ">
 
<input type="button" onClick="Add()" value="Click! ">
Ligne: <input id="ligne" type="text" value = "1" >
 
<div id='conteneur' style="position:relative">
<P class="verif" id='alpha' style="position:absolute; left:10px; top:50px;" ></P>
<P class="verif" id='beta' style="position:absolute; left:30px; top:50px;" ></P>
<P class="verif" id='gama' style="position:absolute; left:10px; top:70px;" ></P>
<P class="verif" id='delta' style="position:absolute; left:30px; top:70px;" ></P>
</div>
 
 
 
</body>
</html>

26/01/2021, 13h15
javatwister

Ta conception est encore brouillonne, ce qui complique un peu la compréhension pour nous;

Si tu avais un rendu de ce que ça donne ou un objectif qui nous guide...?
26/01/2021, 13h55
SpaceFrog

Code:

domElement.id.value = domElement.id.value + '1';

...

Bonjour,

Effectivement, ma question était plus que brouillonne. En fait je n'avais même pas besoin de ce que je vous demandais.
Pas besoin d'incrémenter les div.
Il s'agissait d'enregistrer des "résultats colorés" (des petits ronds colorés) et de placer ces résultats sur des lignes qui changent à chaque clic.
Cela fait partie d'un projet de Mastermind.
J'ai réussi grâce à la contribution de javatwister : un petit "oui" qui m'a beaucoup fait rire mais qui m'a aussi donné à réfléchir.

voici ce que je voulais obtenir :

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
<head>
<meta charset="UTF-8">
 
<style>
    .verif {
    margin-right: 5px;
    height: 16px;
    width: 16px;
    display: inline-block;
 
    background-color: grey;
    border-radius: 8px;
    box-shadow: 5px;
    text-align: center;
}
 </style>
</head>
<body>
<div id="result">
    <div id="div_0" style="position:absolute; left:100px; top:70px;">
		<p class="verif" id='alpha'  ></p>
		<p class="verif" id='beta' style="position:absolute; left:20px;" ></p>
		<p class="verif" id='gama' style="position:absolute; top:22px; left:20px;" ></p>
		<p class="verif" id='delta' style="position:absolute; top:22px;" ></p>
    </div>
</div>
<p>Ligne: <a id="ligne">1</a></p>
 
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'red';
document.getElementById('beta').style.backgroundColor = 'blue';
document.getElementById('gama').style.backgroundColor = 'green';
document.getElementById('delta').style.backgroundColor = 'purple';
" value="ColorResult1 ">
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'purple';
document.getElementById('beta').style.backgroundColor = 'green';
document.getElementById('gama').style.backgroundColor = 'blue';
document.getElementById('delta').style.backgroundColor = 'red';
" value="ColorResult2 ">
 
<input type="button" onClick="counter() , cloning()"  value="Go ! ">
 
<script type="text/javascript">
function cloning() {
        if(ligne <= 4){
    var container = document.getElementById('result');
    var clone = document.getElementById('div_0').cloneNode(true);
    clone.setAttribute('id','div_'+document.getElementById('result').getElementsByTagName('div').length);
    container.appendChild (clone);
        var domElement = document.getElementById('div_1');
        domElement.style.position = 'absolute';
        domElement.style.top = 200;
        domElement.style.left = 10;
        var domElement = document.getElementById('div_2');
        domElement.style.position = 'absolute';
        domElement.style.top = 150;
        domElement.style.left = 10;
        var domElement = document.getElementById('div_3');
        domElement.style.position = 'absolute';
        domElement.style.top = 100;
        domElement.style.left = 10;
        }
};
 
var ligne = 1;
function counter() {
ligne += 1;
document.getElementById("ligne").innerHTML = ligne;
};
</script>
</body>
</html>

Bien sûr, ce n'est certainement pas très "propre", mais ça fonctionne!

Merci à tous

Je passe en résolu

26/01/2021, 20h42
javatwister

Oui, c'était très drôle :mrgreen: ... mais à part ça, ton rendu montre que tout n'est pas résolu: on attend au moins que la ligne ajoutée soit visible à l'écran et que les couleurs changent quand tu le demandes; là, tu changes juste la première ligne!

Bonsoir,

J'ai certainement mal expliqué !
j'ai mis des indications dans le code pour préciser.
Au départ, les quatre ronds gris sont le résultat du joueur, si je clique sur "go", les quatre rond gris sont bien clonés en ligne 1 (ligne du bas)
Ensuite, si je clique sur "ColorResult1", puis sur "go", les nouvelles couleurs du résultat sont bien clonées en ligne 2
Enfin, si je clique sur "ColorResult2", puis sur "go", les nouvelles couleurs du résultat sont bien clonées en ligne 3
C'est ce que je voulais obtenir. (vérifié avec xamppmbp sous FirefoxNightly et Chrome)
La première ligne n'est pas en haut, elle est en bas. En haut, c'est le résultat du joueur que l'on peut modifier avec les boutons color et cloner avec le bouton go

Mais tout ceci n'a qu'une importance relative ;-)

Cordialement

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
<meta charset="UTF-8">
 
<style>
    .verif {
    margin-right: 5px;
    height: 16px;
    width: 16px;
    display: inline-block;
 
    background-color: grey;
    border-radius: 8px;
    box-shadow: 5px;
    text-align: center;
}
 </style>
</head>
<body>
<p  id='comment1' style="position:absolute; top:100px; left:180px;" ><--ceci n'est pas une ligne<br>c'est le résultat obtenu par le joueur</p>
<p  id='comment2' style="position:absolute; top:245px; left:90px;" ><--ceci est la ligne 1</p>
<p  id='comment3' style="position:absolute; top:195px; left:90px;" ><--ceci est la ligne 2</p>
<p  id='comment4' style="position:absolute; top:145px; left:90px;" ><--ceci est la ligne 3</p>
 
<div id="result">
    <div id="div_0" style="position:absolute; left:100px; top:70px;"> 
		<p class="verif" id='alpha' style="position:absolute; top:20px; left:20px;" ></p>
		<p class="verif" id='beta' style="position:absolute; top:20px; left:40px;" ></p>
		<p class="verif" id='gama' style="position:absolute; top:40px; left:20px;" ></p>
		<p class="verif" id='delta' style="position:absolute; top:40px; left:40px;" ></p>
    </div>
</div>
<p>Ligne: <a id="ligne">1</a></p>
 
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'red';
document.getElementById('beta').style.backgroundColor = 'blue';
document.getElementById('gama').style.backgroundColor = 'green';
document.getElementById('delta').style.backgroundColor = 'purple';
" value="ColorResult1 ">
<input type="button" onClick="
document.getElementById('alpha').style.backgroundColor = 'purple';
document.getElementById('beta').style.backgroundColor = 'green';
document.getElementById('gama').style.backgroundColor = 'blue';
document.getElementById('delta').style.backgroundColor = 'red';
" value="ColorResult2 ">
 
<input type="button" onClick="counter() , cloning()"  value="Go ! ">
 
<script type="text/javascript">
function cloning() {
        if(ligne <= 4){
    var container = document.getElementById('result');
    var clone = document.getElementById('div_0').cloneNode(true);
    clone.setAttribute('id','div_'+document.getElementById('result').getElementsByTagName('div').length);
    container.appendChild (clone);
        var domElement = document.getElementById('div_1');
        domElement.style.position = 'absolute';
        domElement.style.top = 220;
        domElement.style.left = 10;
        var domElement = document.getElementById('div_2');
        domElement.style.position = 'absolute';
        domElement.style.top = 170;
        domElement.style.left = 10;
        var domElement = document.getElementById('div_3');
        domElement.style.position = 'absolute';
        domElement.style.top = 120;
        domElement.style.left = 10;
        }
};
 
var ligne = 1;
function counter() {
ligne += 1;
document.getElementById("ligne").innerHTML = ligne;
};
</script>
</body>
</html>