Pourquoi ClassName brise ce code?

Question

J'ai créé 2 éléments simples:

var mydragg = function() { 
 
    return { 
 
    move: function(div, xpos) { 
 
     div.style.left = xpos + 'px'; 
 
    }, 
 
    startMoving: function(div, container, evt) { 
 
     evt = evt || window.event; 
 
     var posX = evt.clientX, 
 
     divLeft = div.style.left, 
 
     eWi = parseInt(div.style.width = "200px"), 
 
     cWi = parseInt(document.getElementById(container).style.width = "200px"); 
 

 
     document.getElementById(container).style.cursor = 'move'; 
 

 
     divLeft = divLeft.replace('px', ''); 
 
     var diffX = posX - divLeft; 
 
     document.onmousemove = function(evt) { 
 
     evt = evt || window.event; 
 
     var posX = evt.clientX, 
 
      aX = posX - diffX; 
 
     if (aX < 0) aX = 0; 
 
     if (aX > cWi) aX = cWi; 
 

 
     mydragg.move(div, aX); 
 
     } 
 
    }, 
 
    stopMoving: function(container) { 
 
     var a = document.createElement('script'); 
 
     document.getElementById(container).style.cursor = 'default'; 
 
     document.onmousemove = function() {} 
 
    }, 
 
    } 
 
}();

<div class="wrapper"> 
 
    <div id="container"> 
 
    <div class="green dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper wrapper-red"> 
 
    <div id="container"> 
 
    <div class="red dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'> 
 
    </div> 
 
    </div> 
 
</div>

Tout fonctionne très bien (vert et bloc rouge traînent par la souris - https://codepen.io/rinatoptimus/pen/GvMNPW), mais il ne devrait pas y avoir plusieurs ids avec le même prénom. J'ai donc changé ids ('container') en classes, après que ce code ne fonctionne pas: https://codepen.io/rinatoptimus/pen/OjxWJO?editors=1010

Answer 1

Vous appelez document.getElementById(container), comme vous l'avez dit vous-même, c'est une classe pas un ID. Vous devriez appeler le document.getElementsByClassName à la place.

Toutefois, vous ne faites qu'interroger le document pour tous les noms de classe ayant ce nom, de sorte que vous obtiendrez plusieurs et ne savez pas lequel sélectionner. Il existe de nombreuses solutions, mais on est qu'il pourrait être plus facile de sélectionner l'élément parent avec div.parentElement:

https://codepen.io/ferahl/pen/oeGBgL

Answer 2

Vous pouvez envoyer l'élément à javascript, et javascript vous suffit d'accéder directement à l'élément que vous envoyé, pas besoin d'interroger l'élément à nouveau.

Html

<div class="wrapper"> 
<div class="container">  
    <div class="green dragme" onmousedown='mydragg.startMoving(this,event);' 
    onmouseup='mydragg.stopMoving(this);'> 
    </div> 
</div> 

<div class="wrapper wrapper-red"> 
    <div class="container">  
     <div class="red dragme" onmousedown='mydragg.startMoving(this,event);' 
     onmouseup='mydragg.stopMoving(this);'> 
     </div> 
    </div> 
</div> 

javascript

var mydragg = function(){ 
return { 
    move : function(div,xpos){ 
    div.style.left = xpos + 'px'; 
    }, 
    startMoving : function(div,evt){ 
    evt = evt || window.event; 
    var posX = evt.clientX, 
     divLeft = div.style.left, 
     eWi = parseInt(div.style.width = "200px"), 
     cWi = parseInt(div.style.width = "200px"); 

    div.style.cursor='move'; 

    divLeft = divLeft.replace('px',''); 
    var diffX = posX - divLeft; 
    document.onmousemove = function(evt){ 
     evt = evt || window.event; 
     var posX = evt.clientX, 
      aX = posX - diffX; 
     if (aX < 0) aX = 0; 
     if (aX > cWi) aX = cWi; 

     mydragg.move(div,aX); 
    } 
    }, 
    stopMoving : function(container){ 
    var a = document.createElement('script'); 
    container.style.cursor='default'; 
    document.onmousemove = function(){} 
    }, 
} }();