JS不会在没有用户输入的情况下更改对象的可见性

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";
}

如果我打开网站，函数invis不起作用，div也不可见，但如果我点击最后一个标记为"；Ablehnen"；那么函数invis工作良好

为什么会这样，我如何才能做到这一点？

Answer 1

试试这个

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

Answer 2

始终在HTML元素之后使用脚本标记。就像这个

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