Je joue avec les événements de clic et je remarque que cette fonction ne fonctionne que la première fois. Pourquoi donc? Comment puis-je faire en sorte qu'il soit possible d'échanger en permanence des identifiants entre deux éléments?

Et, y aurait-il un changement radical d'approche si l'on transmettait les identifiants parmi un plus grand nombre d'éléments?

Je n'utilise pas du tout jQuery. Merci.

 window.onload = function() {
	document.addEventListener('click', function(e) {
	  document.getElementById("purpleSquare").id = 'redSquare';
	  document.getElementById("redSquare").id ="purpleSquare";
	})
};
#redSquare {
	background-color: red;
    width: 20px;
    height: 20px;
}
#purpleSquare {
	background-color: purple;
    width: 20px;
    height: 20px;
}
        <div id="redSquare"></div>

        <div id="purpleSquare"></div>
3
fstopzero 14 juil. 2015 à 01:54

2 réponses

Meilleure réponse

Parce qu'après avoir exécuté ce code ...

document.getElementById("purpleSquare").id = 'redSquare';

... il y aura deux éléments avec id="redSquare".

Par conséquent, ce ne sera pas fiable:

document.getElementById("redSquare")

Dans DOM2 et DOM3 le comportement n'a pas été défini:

Le comportement n'est pas défini si plus d'un élément a ce ID.

Dans DOM4, le premier élément sera renvoyé. Par conséquent, la première fois que vous cliquez, cela fonctionnera parce que vous souhaitez obtenir le premier. Mais lorsque vous cliquez à nouveau, vous voulez obtenir le deuxième, donc cela ne fonctionne pas.

Au lieu de cela, vous pouvez stocker les éléments dans des variables avant de modifier leurs ID.

var el1 = document.getElementById("purpleSquare"),
    el2 = document.getElementById("redSquare");
el1.id = 'redSquare';
el2.id ="purpleSquare";
document.addEventListener('click', function(e) {
  var el1 = document.getElementById("purpleSquare"),
      el2 = document.getElementById("redSquare");
  el1.id = 'redSquare';
  el2.id ="purpleSquare";
})
#redSquare {
  background-color: red;
  width: 20px;
  height: 20px;
}
#purpleSquare {
  background-color: purple;
  width: 20px;
  height: 20px;
}
<div id="redSquare"></div>
<div id="purpleSquare"></div>
5
Oriol 13 juil. 2015 à 23:11

Essayez de basculer entre les identifiants comme ceci:

 document.getElementById("purpleSquare").id = 'xxxxxx';
 document.getElementById("redSquare").id ="purpleSquare";
 document.getElementById("xxxxxx").id = 'redSquare';

Cela devrait fonctionner. Parce que si vous exécutez cette ligne de code:

document.getElementById("redSquare").id ="purpleSquare";

Sans le premier:

 document.getElementById("purpleSquare").id = 'xxxxxx';

Vous aurez deux éléments avec id = "purpleSquare" . et cela crée un problème si vous essayez d'exécuter:

 document.getElementById("purpleSquare").id = 'redSquare';
2
CupawnTae 13 juil. 2015 à 23:35