hide div with javascript

Question

Why doesn't this work. What should i do with the js to hide me the s_login div? pls help

<?php
define("INSTALLING", true);
$hide = true;
if(INSTALLING == true): ?>
    <script type="text/JavaScript">
    <?php if (isset($hide)){if($hide == true){echo "
    document.getElementById('s_login').style.visibility = 'hidden';
    ";}} ?>
    </script>
    <div id="s_login">
        <form action="index.php" method="GET">
            <input type="text" name="s_host" placeholder="MySQL Host" />
            <input type="text" name="s_user" placeholder="MySQL Username"  />
            <input type="password" name="s_password" placeholder="MySQL Password" />
            <input type="submit" name="submit" value="Log In" />
        </form>
    </div>
<?php else: ?>
<?php endif; ?>

At the time javascript executes, the div you are trying to hide is not present in the page, move them around making the javascript below the HTML — Dellirium, Jun 19 '16 at 12:21
see http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript — Ammar Abbasi, Jun 19 '16 at 12:22
We all make mistakes, ctrl + shift + i (and switch to console tab) to see the error messages that the browser is sending, in this case you'd get document.getElementById(...) is null which could hint you into the direction of element not existing, so you can help yourself in the future! Cheers — Dellirium, Jun 19 '16 at 12:29

bhavya_w · Answer 1 · 2016-06-19T12:30:10.110

Put the hiding element script code inside dom ready or window onload method. Your script is executed first and at that time the dom i.e you s_login element isn't available inside the DOM.

With the current code check this and you'll get null. I.e you don't have an element at hand which you hide.

var element = document.getElementById('s_login');
console.log(element);

if you are using jquery you can do this:

$(document).on("ready",function(){
   document.getElementById('s_login').visibility = "hidden"
});

else natively

window.onload = function(){
   document.getElementById('s_login').visibility = "hidden"
}

Didn't use DOMContentLoaded Listener as that can have some cross browser concerns.

score 0 · Answer 2 · answered Jun 19 '16 at 12:24

The best way is to wrap the function within

 $(document).ready(function() {
     // script here
 }

using jQuery, or

document.addEventListener("DOMContentLoaded", function(event) { 
     // script here
});

without jQuery.

This ensures the DOM is loaded before the script is fired.

hide div with javascript

2 Answers2