动态显示/隐藏div与JavaScript无法正常工作

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>  

Answer 2

Remove the quotes:

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

Becomes

var catdiv = document.getElementById(divsId);

You don't have an element with an ID of "divsId".

On 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).

A better solution might be:

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

(And yes, I did mean to put the triple equals === in)

Answer 3

Your code is looking for a div with an ID "divsId" change your code to:

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

Answer 4

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

Answer 5

Remove quotes from var catdiv = document.getElementById("divsId"); should be var catdiv = document.getElementById(divsId);

And add quotes:

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

Should be

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

Answer 6

Improved function

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;
}

And as mentioned, quotes are needed when writing yucky inline javascript.

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

Tbh. pick a js toolkit/library and use it over reinventing the wheel yourself and stop writing inline javascript, your life and happiness will improve substantially if you do =P