changer div id par javascript

J'ai créé une page simple pour changer l'ID div chaque fois que j'ai appuyé sur submit. Mon problème est que cela change de div_top1 -> div_top2, mais la deuxième fois que j'appuie sur le bouton, il cesse de changer :(changer div id par javascript

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
      function changediv() 
      {              
       document.getElementById("div_top1").innerHTML=Date();   
       document.getElementById("div_top1").setAttribute("id", "div_top2"); 
       document.getElementById("div_top2").innerHTML="teste";    
       document.getElementById("div_top2").setAttribute("id", "div_top1"); 
      } 
     </script> 

     <style> 
      .top {    
       background-color: navy;  
       color: white; 
       padding: 10px 10px 10px 10px; 
       margin: 5px 5px 5px 5px;         
      } 

      .down {    
       background-color: aqua; 
       padding: 10px 10px 10px 10px; 
       margin: 5px 5px 5px 5px;   
      }   
     </style> 

    </head> 
    <body> 
     <div id="div_top1" class="top">This is a paragraph.</div> 
     <div class="down"><button type="button" onclick="changediv()">Display Date</button></div> 
    </body> 
</html>

Source

2013-05-16 Diogo Leones

Puis-je demander POURQUOI voulez-vous changer d'ID? Pourquoi pas classname? L'ID ne change qu'une seule fois car la deuxième fois que vous ne pouvez pas trouver le premier ID – mplungjan

Ne seriez-vous pas plus sûr de changer la classe d'un div? – slinky2000

Dans votre code, le moment où vous changez div_top1 par exemple en div_top2, alors il resterait là. Sauf si vous mettez un if pour le basculer, il continuera à changer. – Edper

Working FIDDLE Demo

Essayez ceci:

function changediv() 
{ 

    if (document.getElementById("div_top1")) { 
     document.getElementById("div_top1").innerHTML=Date();   
     document.getElementById("div_top1").setAttribute("id", "div_top2"); 
    } 
    else { 
     document.getElementById("div_top2").innerHTML="teste";    
     document.getElementById("div_top2").setAttribute("id", "div_top1"); 
    } 


}

Source

2013-05-16 10:03:41

parfois, la seule chose qu'il faut faire est d'avoir quelqu'un pousser: D Merci, cela fonctionne très bien, et maintenant j'ai compris pourquoi ma solution didn 't .... J'ai été setAttribute deux fois ... –

Le problème n'est pas l'identifiant changeant - c'est que vous changez les deux manières à chaque fois Vous avez besoin d'une condition if Vous devriez aussi utiliser .id pour changer l'identifiant au lieu de setAttribu te() - J'ai eu des problèmes avec certains navigateurs dans le passé (il y a plusieurs années) en utilisant setAttribute pour les changements d'identifiant.

DEMO: http://jsfiddle.net/x2nPY/

function changediv() { 
    if (document.getElementById("div_top1")) { 
     document.getElementById("div_top1").innerHTML = Date();   
     document.getElementById("div_top1").id = "div_top2"; 
    } else { 
     document.getElementById("div_top2").innerHTML = "teste";    
     document.getElementById("div_top2").id = "div_top1"; 
    } 
}

Source

2013-05-16 10:04:51

en passant ... est-il possible de faire un include comme .include = "index.php"? Je voudrais inclure différentes pages dans le div ... –

Vous pouvez utiliser AJAX pour charger le contenu du serveur, puis .innerHTML pour le placer dans la div. –

Vous pouvez utiliser si par exemple si vous voulez l'activer ou changer chaque fois que vous soumettez comme:

function changediv() {           
if (document.getElementById("div_top1")) 
{ 
    document.getElementById("div_top1").innerHTML=Date();   
    document.getElementById("div_top1").setAttribute("id", "div_top2"); 

} 
else 
{ 
    document.getElementById("div_top2").innerHTML="teste";    
    document.getElementById("div_top2").setAttribute("id", "div_top1"); 
} 

}

Voir la Fiddle Demo

Source

2013-05-16 10:07:47 Edper

changer div id par javascript

Répondre

Questions connexes