Geek Answers Handbook

Dynamic show / hide div with javascript not working

I have a basic show / hide javascript that works until I make it dynamic and check the parameter. I would really appreciate it if someone could help me understand why the dynamic version is not working.

Work 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>

Inoperative 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>
+4
source share
6 answers

You have a variable name enclosed in string delimiters, which makes it a string literal instead of a variable. Change

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

For

 var catdiv = document.getElementById(divsId);

On the back of a function call, you need quotation marks in this argument (because it must be a string), you can use single quotes to avoid conflicts:

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

Delete quotes:

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

becomes

 var catdiv = document.getElementById(divsId);

You do not have an element with the id "divsId".

In a completely unrelated note, you cannot be sure that catdiv.style.display will always be "" when it is visible. There are other styles that make it appear (for example, "inline", "block").

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 really wanted to put the triple equal === in)

0
source

Your code is looking for a div with the 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 = ""; } }
0
source

Because you are looking for a div called "divsId", not a value in the divsId variable. Remove the insignia!

0
source

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>

Must be

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

Enhanced 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 already mentioned, quotation marks are necessary when writing yucky inline javascript.

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

TVN. select js toolkit / library and use it to reinvent the wheel yourself and stop writing inline javascript, your life and happiness will improve significantly if you do = P

0
source

More articles:


All Articles