Question

I show us the code:

(function (){
  var element = document.getElementById('bar'), hideElement = document.getElementById('foo'),
  var html = document.getElementsByTagName('html')[0];
  tool.onclick = function() {
    hideElement.style.display = 'block';
    html.onclick = function() {
      hideElement.style.display = 'none';
    }
  }
})();

This piece of code work’s fine, but, after clicking html, I can not reopen the hidden element.

I want to click the html element and give display:none to hideElement, then to click the element id=”bar”, give to the hidden element display:block, but instead of click the element foo, click the html element. What I can do?

Oh, i need help WITHOUT JQUERY, thanks 🙂

EDIT: something like that : click on body except some other tag not working , but without JQuery,

Answer 1

I’m not sure it’s going to answer your question, but here it is: how to handle an event on the body except one element:

document.documentElement.onclick = function(e) {
    var evt = e || window.event, // IE...
        target = evt.target || evt.srcElement // IE again...
    // There, "target" is the element clicked. See where I'm going?
    if (target.id !== "foo") {
        // Do w/e you want if the page was clicked, except for "foo"
    }
}

This is the concept of “event bubbling”. You can listen to one element and all its children at once, and get the target as specified in the code up there.