Dynamic show/hide div with javascript not working

Ask Time：2010-08-10T22:53:52 Author：Poppe76

I have a basic show/hide javascript that works, as long as i don't make it dynamic and make sure of a parameter. I would appreciate a lot if anyone could help me figure out why the dynamic version doesn't work.

Working code:
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 working code:
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>

Author:Poppe76，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/3450286/dynamic-show-hide-div-with-javascript-not-working

Andy E :

You have a variable name wrapped in string delimiters, making it a string literal instead of a variable. Change\n\nvar catdiv = document.getElementById(\"divsId\");\n\n\nTo\n\nvar catdiv = document.getElementById(divsId);\n\n\nOn the flipside, the call to the function needs the quotes in it's argument (because it should be a string), you can use single quotes to avoid confliction:\n\nAdd new category \n",

2010-08-10T14:56:25

JKirchartz :

Your code is looking for a div with an ID \"divsId\" change your code to:\n\n function togglesDiv(divsId){ \n var catdiv = document.getElementById(divsId);\n if(catdiv.style.display == \"\"){ \n catdiv.style.display = \"none\"; \n } else { \n catdiv.style.display = \"\"; \n } \n } \n",

2010-08-10T14:57:34

Woody :

Because you are looking for a div called \"divsId\" rather than the value in the variable divsId.\nRemove the speach marks!",

2010-08-10T14:57:50

giker :

Remove quotes from \nvar catdiv = document.getElementById(\"divsId\");\nshould be \nvar catdiv = document.getElementById(divsId);\n\nAnd add quotes:\n\nAdd new category\n\n\nShould be\n\nAdd new category \n",

2010-08-10T15:01:39

James Wiseman :

Remove the quotes:\n\nvar catdiv = document.getElementById(\"divsId\");\n\n\nBecomes\n\nvar catdiv = document.getElementById(divsId);\n\n\nYou don't have an element with an ID of \"divsId\".\n\nOn a completely unrelated note, you can't be sure that catdiv.style.display will always be equal to \"\" when it is visibile. There are other styles which cause it to be displayed ('inline', 'block', for example).\n\nA better solution might be:\n\nfunction togglesDiv(divsId){ \n var catdiv = document.getElementById(\"divsId\");\n if(catdiv.style.display === \"none\"){ \n catdiv.style.display = \"\"; \n } else { \n catdiv.style.display = \"none\"; \n } \n} \n\n\n(And yes, I did mean to put the triple equals === in)",

2010-08-10T14:56:28

Dynamic show/hide div with javascript not working