用javascript隐藏div

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; ?>

Answer 1

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.