cloneNode et incrementation des id

**philippepetit** · 26/01/2021, 11h52

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 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
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>

**javatwister** · 26/01/2021, 12h15

Oui.

**SpaceFrog** · 26/01/2021, 12h23

mais pas avec

Code :

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

id.value

**philippepetit** · 26/01/2021, 12h30

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 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
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>

**javatwister** · 26/01/2021, 13h15

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...?

**SpaceFrog** · 26/01/2021, 13h55

Code :

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

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

...

**philippepetit** · 26/01/2021, 19h32

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 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
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

**javatwister** · 26/01/2021, 20h42

Oui, c'était très drôle

... 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!

**philippepetit** · 27/01/2021, 00h23

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 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
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>

cloneNode et incrementation des id

JavaScript

Discussions similaires

Partager

Partager