用于更改 div 显示的 Javascript cookie答案

【问题标题】：Javascript cookie used to alter display of divs用于更改 div 显示的 Javascript cookie
【发布时间】：2016-09-16 03:11:47
【问题描述】：

我希望能够在第一次页面浏览时显示一个大型促销，然后只显示一个可展开的最小化促销。看来我在 javascript 中的条件并没有改变 div 的样式。警报对话框（用于测试）确实有效，并且 cookie 似乎正在运行。我是一个 JavaScript 新手。

感谢任何帮助。

<script>
if (document.cookie.indexOf('visited=true') == -1) {
var oneDay = 1000*60*60*24*1;
var expires = new Date((new Date()).valueOf() + oneDay);
document.cookie = "visited=true;expires=" + expires.toUTCString();
alert('We can show the large promo because this is the first page view for today.');
} else {
alert('We\'ve already shown the large promo, we will show a much smaller expandable promo.');
document.getElementById('promo').style.display='none';
document.getElementById('promo-reduced').style.display='block';
}
</script>

<div id="promo-reduced" style="display:none;">
<a onclick="show();"> <img src="/images/small_icon.gif" height="26" width="48" border="0" align="left" />Learn about this product.</a>
</div>

<div id="promo" style="display:block;">
<a onclick="conceal();">Close</a> 
<a href="/learn-more.html" target="_blank" onclick="conceal();"><img src="/images/large-promo.jpg" border="0" /></a><br />
</div>

【问题讨论】：

您的脚本在 HTML 放置在页面上之前执行。您应该将上述脚本放在 HTML 代码下方。我希望你在 document.onload 上执行脚本

标签： javascript css cookies

【解决方案1】：

您的代码似乎可以工作，但 JavaScript 在 DOM 准备好之前就触发了。尝试将脚本放在正文内容之后。

【讨论】：

你们说的都对，脚本是在 DOM 之前加载的。我首先添加了一个正文 onload 并且有效，但决定将我的代码包装在 document.addEventListener("DOMContentLoaded", function(event) { -- 添加到第一个脚本中。