Javascript - Hide DIV function does not work

Question

Hello

I have a div on my page that is defined as ( display: None ) and when clicking on the link hides or displays, but I’m not understanding why my function is not working.

Code:

function esconder(el)
{
  var esconder = document.getElementById(el).style.display;
  if(esconder == "none")
    {
     alert("Exibir: " + el);
     esconder.style.display = "block";
    }
   else
    {
     alert("Esconder: " + el);
     esconder.style.display = "none";
    }
}

Thank you

Answer 1

You have a problem with your code, esconder is not a reference to the element, but a string with the state of the display.

That is, the line var esconder = document.getElementById(el).style.display; will cause esconder be a string with "none" or "block" and so you can’t use esconder.style.display = "block";, because it would be the same as

"none".style.display = "block";

Usa var esconder = document.getElementById(el); and so you already have a reference to the:

function esconder(el) {
    var esconder = document.getElementById(el);
    if (esconder.style.display == "none") {
        alert("Exibir: " + el);
        esconder.style.display = "block";
    } else {
        alert("Esconder: " + el);
        esconder.style.display = "none";
    }
}