Question

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>

Answer 1

You have a variable name wrapped in string delimiters, making it a string literal instead of a variable. Change

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

To

var catdiv = document.getElementById(divsId);

On 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:

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