JS do not change the visibility of the object without User Input

Question

HTML:   

    <script type="text/javascript">
            invis();
          </script>
        
          <div id="cok" class="cookiesTXT">
            <h2>Diese Seite nutz Cookies, unsere Cookie Richtlinien finden sie <a href="/cookies">hier</a>
            <br> Sind sie damit einverstanden? </h2>
            <button type="button" name="button" onclick="accept()">Akzeptieren</button>
            <button type="button" name="button" onclick="invis()">Ablehnen</button>
          </div>
    
    
    
    JavaScript:
    
    function invis(){
      document.getElementById("cok").style.display = "none";
    }

If I open the Site the function invis is not working and the div isn't invisible, but if I click the last Button labeled "Ablehnen" then the function invis work well

Why is this, and how can I make this work ?

The error in your console should tell you a reason. – epascarello Nov 08 '20 at 11:26 — epascarello, Nov 08 '20 at 11:26

score 0 · Answer 1 · answered Nov 08 '20 at 11:09

Try this

<div id="cok" class="cookiesTXT">
    <h2>Diese Seite nutz Cookies, unsere Cookie Richtlinien finden sie 
<a href="/cookies">hier</a>
        <br> Sind sie damit einverstanden? </h2>
    <button type="button" name="button" onclick="accept()">Akzeptieren</button>
    <button type="button" name="button" onclick="invis()">Ablehnen</button>
</div>

<script type="text/javascript">
    let isShow = false;
    function invis() {
        isShow ? document.getElementById("cok").style.display = "display" : document.getElementById("cok").style.display = "none";
        isShow = !isShow;
    }
    invis();
</script>

score 0 · Answer 2 · answered Nov 08 '20 at 11:16

Always use script tag after HTML Element. Just like this

<div id="cok" class="cookiesTXT">
    <h2>Diese Seite nutz Cookies, unsere Cookie Richtlinien finden sie <a href="/cookies">hier</a>
        <br> Sind sie damit einverstanden? </h2>
    <button type="button" name="button" onclick="accept()">Akzeptieren</button>
    <button type="button" name="button" onclick="invis()">Ablehnen</button>
</div>

<script type="text/javascript">
    invis();
    function invis() {
        document.getElementById("cok").style.display = "none";
    }
</script>

JS do not change the visibility of the object without User Input

2 Answers2