Q: Show hidden element I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>register page</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/test.js"></script>
  </head>
  <body>
    <form id="register-form">           
        <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
        <input id="register-username-input" type="text" placeholder="Type username..."/>
        <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
        </form>
    </div>
  </body>
</html>

And my js file:
function show_element (id) {
    document.getElementById(id).style.visibility = 'visible';
}

When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too. 
Thank you.

A: Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>


A: You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
  <script type="text/javascript">
    function show_element (id) {
      document.getElementById(id).style.visibility = 'visible';
    }
  </script>
</head>


A: Sorry but this code works:
    <html>

    <head>

    <script>
    function show_element (id) {
        document.getElementById(id).style.visibility = 'visible';
    }
    </script>
    </head>
    <body>
    <div>
    <span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
      <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
    </div>

    </body>
    </html>

EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>register page</title>
        <link rel="stylesheet" href="./static/css/bootstrap.min.css">
        <script type="text/javascript" src="./static/js/test.js"></script>
      </head>
      <body>
        <form id="register-form">           
            <label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
            <input id="register-username-input" type="text" placeholder="Type username..."/>
            <button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
            </form>
        </div>
      </body>
    </html>

