Dynamique afficher/masquer div avec javascript ne fonctionne pas

Question

J'ai un show basique/cacher javascript qui fonctionne, tant que je ne le rend pas dynamique et assurez-vous d'un paramètre. J'apprécierais beaucoup si quelqu'un pouvait m'aider à comprendre pourquoi la version dynamique ne fonctionne pas.

Code de travail:
javascript

function togglesDiv(){ 
    var catdiv = document.getElementById("addNewCat"); 
    if(catdiv.style.display == ""){ 
    catdiv.style.display = "none"; 
    } else { 
    catdiv.style.display = ""; 
    } 
} 

html

<span onclick="togglesDiv();">Add new category</span> 
<div id="addNewCat" style="display: none;"> 
lalala 
</div> 

Non Code de travail:
javascript

function togglesDiv(divsId){ 
    var catdiv = document.getElementById("divsId"); 
    if(catdiv.style.display == ""){ 
    catdiv.style.display = "none"; 
    } else { 
    catdiv.style.display = ""; 
    } 
} 

html

<span onclick="togglesDiv(addNewCat);">Add new category</span> 
<div id="addNewCat" style="display: none;"> 
lalala 
</div> 

Answer 1

Vous avez un nom de variable enveloppé dans délimiteurs de chaîne, ce qui en fait une chaîne littérale au lieu d'une variable. Changer

var catdiv = document.getElementById("divsId"); 

Pour

var catdiv = document.getElementById(divsId); 

Sur l'autre face, l'appel à la fonction a besoin des citations dans son argument (car il doit être une chaîne), vous pouvez utiliser des guillemets simples pour éviter conflictualité:

<span onclick="togglesDiv('addNewCat');">Add new category</span> 

Answer 2

Supprimer les citations:

var catdiv = document.getElementById("divsId"); 

Devient

var catdiv = document.getElementById(divsId); 

Vous ne disposez pas d'un élément avec un ID de "divsId". Sur une note complètement indépendante, vous ne pouvez pas être sûr que catdiv.style.display sera toujours égal à "" lorsqu'il est visible. D'autres styles l'amènent à s'afficher ('inline', 'block', par exemple).

Une meilleure solution pourrait être:

function togglesDiv(divsId){ 
    var catdiv = document.getElementById("divsId"); 
    if(catdiv.style.display === "none"){ 
    catdiv.style.display = ""; 
    } else { 
    catdiv.style.display = "none"; 
    } 
} 

(Et oui, je ne veux mettre les égaux triple === in)

Answer 3

Votre code est à la recherche d'un div avec un ID "divsId" changement votre code:

function togglesDiv(divsId){ 
     var catdiv = document.getElementById(divsId); 
     if(catdiv.style.display == ""){ 
     catdiv.style.display = "none"; 
     } else { 
     catdiv.style.display = ""; 
     } 
    } 

Answer 4

Parce que vous êtes à la recherche d'un div appelé « divsId » plutôt que la valeur de la divsId variable. Enlevez les marques de rayon!

Answer 5

Supprimer des citations de var catdiv = document.getElementById("divsId"); devraient être var catdiv = document.getElementById(divsId);

Et ajouter des citations:

<span onclick="togglesDiv(addNewCat);">Add new category</span> 

devrait être

<span onclick="togglesDiv('addNewCat');">Add new category</span> 

Answer 6

fonction Amélioration

function toggleDisplay(id){ 
    var el = document.getElementById(id); 
    if(!el) return true; 
    // feature detect to support IE versions. 
    var dis = 'currentStyle' in el ? el.currentStyle.display : el.style.display; 
    // toggle display 
    el.style.display = /none/i.test(dis) ? '' : 'none'; 
    // prevent memory leak 
    el = null; 
} 

Et comme mentionné, les citations sont nécessaires lors de l'écriture de javascript en ligne yucky.

<span onclick="toggleDisplay('addNewCat')"> ... etc 

Tbh. choisissez une boîte à outils/bibliothèque js et utilisez-la pour réinventer la roue et arrêtez d'écrire javascript en ligne, votre vie et votre bonheur s'amélioreront considérablement si vous faites = P