Une Function(); ne fonctionne qu'une seule fois

Salut à vous tous !
Premièrement, merci d’être venu

Je vais vous poser une petite question à propos d'un de mes codes en JavaScript.
Pour expliquer un peu la situation, je développe un peu un "système d'exploitation" en JS (c'est tout à fait inutile mais cela permet de m’entraîner et de sortir un peu de ces 4 longues années que j'ai voué au PHP)

Bref, lorsque j'ouvre une première page tout se passe bien (je peux déplacer la fenêtre ect...)
Mais le problème viens dès que j'ouvre une seconde fenêtre, je ne peux plus la faire bouger à moins que l’élément ait le même ID.

Pour ce qui est du code de la fenêtre :

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

screenindex = 1;
function new_alert(divid,imgid,widthn,heightn){
newapp('Pop-Up',divid,imgid);
dragElement(document.getElementById(divid));
document.getElementById(divid).style.visibility = "visible";
document.getElementById(divid).style = "position: absolute;z-index: 9;background-color: #f1f1f1;border: 1px solid #d3d3d3;min-width:20%;width:"+widthn+";height:"+heightn+";max-height:"+heightn+";top:0;";
divid = null;
}
function fermer(alertid){
    document.getElementById(alertid).innerHTML = null;
    document.getElementById(alertid).style.visibility = "hidden";
    document.getElementById(alertid).id = "EXPIRED";
    closeapp(alertid);
}
function agrandir(screenid){
    document.getElementById(screenid).style.width="100%";
    document.getElementById(screenid).style.height="100%";
    document.getElementById(screenid).style.top="0";
    document.getElementById(screenid).style.left="0";
}
function ddclicked(screenid){
    screenindex = screenindex + 1;
    document.getElementById(screenid).style.zIndex = screenindex;
    console.log(screenid)
}

Oui, c'est un peu long pour une seule fenêtre
En tout cas, un grand merci aux héros du code qui viendrons me sauver
Modifié par UBrainFr (14 Nov 2018 - 20:45)

Hello, as-tu appelé tes fonctions après les avoir définies ?

com-comptoir a écrit :
Hello, as-tu appelé tes fonctions après les avoir définies ?

Oui
La fonction s’exécute bien, mais seulement une fois si l’élément n'a pas le même ID,
Je pense que c'est a cause de la portée des variables.

Bonjour UBrainFr,
Tu peux nous monter le js de newapp()
Modifié par aliasdmc (16 Nov 2018 - 20:49)

appelements = [];
setcodeelement = [];
function newapp(nom,divid,imgid){
var i = appelements.indexOf(divid);
if(i != -1) {
	console.log("ERROR 4478 : l'element d'application existe déjà.");
} else {
    if(appelements.length < 26){
    appelements.push(divid)
    setcodeelement.push("<span id='barelement'><img src='"+imgid+"' style='width:30px;height:30px;margin:0;'></span>")
    document.getElementById("appelements").innerHTML = setcodeelement;
} else {
    console.log("Barre définie : trop d'éléments.");
}
}
}
function closeapp(divid){
var i = appelements.indexOf(divid);
if(i != -1) {
	delete setcodeelement[i];
    delete appelements[i];
    document.getElementById("appelements").innerHTML = setcodeelement;
    i = null;
}
}

Zelalsan a écrit :
salut,
désolé mais le code est un peu fouillis .
Sans y avoir vraiment plongé, je dirais que ça pourrait être dû à une utilisation répétée d'un même ID ou à une non instanciation de gestion d'évènement.
Si les fenêtres sont insérées de manière dynamique, tu dois soit ajouter un gestionnaire d'évènement à chaque nouvelle fenêtre créée, soit passer par une délégation d'évènement.

Je t'ai quand même fait un petit exemple qui peut t'inspirer (ou pas ).
Il faudra ajouter une gestion de calques pour que ça fasse plus propre.

Tout simplement parfait !
Merci pour ton aide et pour ton temps