Bonjour. Je commence le HTML5 et Javascript, en recopiant le code trouvé dans le "Guide Complet" du HTML5, et j'imagine qu'il y une erreur dans le livre(??).
La console de Chrome me donne ce message : "Uncaught TypeError: Cannot read property 'addEventListener' of null". --> Ceci pour la ligne 2.
Or mon addEventListener s'ajoute bien à un objet HTML auquel j'ai attribué un id -->
Voici le HTML
et le JS
La console de Chrome me donne ce message : "Uncaught TypeError: Cannot read property 'addEventListener' of null". --> Ceci pour la ligne 2.
Or mon addEventListener s'ajoute bien à un objet HTML auquel j'ai attribué un id -->
<ul id="players"></ul>Voici le HTML
<body>
<h2>Joueurs disponibles</h2>
<ul id="playersList" ondragstart="startDrag(event)">
<li id="a" draggable="true">joueur A</li>
<li id="b" draggable="true">joueur B</li>
<li id="c" draggable="true">joueur C</li>
<li id="d" draggable="true">joueur D</li>
<li id="e" draggable="true">joueur E</li>
<li id="f" draggable="true">joueur F</li>
</ul>
<h2>Joueurs retenus</h2>
<ul id="players"></ul>
</body>et le JS
var dropTarget = document.getElementById("players");
dropTarget.addEventListener("drop", drop);
dropTarget.addEventListener("dragenter", setDrop);
dropTarget.addEventListener("dragover", setDrop);
function startDrag(event){
// stockage des données dans l'objet transfer
event.dataTransfer.effectAllowed="move";
event.dataTransfer.setData(
"Text",
event.target.getAttribute("id"));
}
function drop(event){
var element = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(element));
}
function setDrop(event){
event.preventDefault();
}