求助：点击按钮设置Cookie后，提示框无法实时隐藏

我一眼就看出问题所在了——你的脚本在尝试获取不存在的DOM元素并修改它的样式，这会直接抛出错误，导致后续的隐藏代码都无法执行！

具体原因 #

你的页面里只存在cookiemessage_main（或同时存在cookiemessage_inner），但脚本里同时尝试获取cookienote、cookiemessage_main、cookiemessage_inner三个元素。当document.getElementById()找不到对应元素时会返回null，之后你尝试访问null.style.display就会触发Cannot read properties of null (reading 'style')的错误，浏览器会直接终止函数执行，所以即使后面的元素存在，也不会被隐藏。

修复方案 #

我们只需要在修改元素样式前，先检查元素是否存在即可，这里给你两种实现方式：

方式一：原生JavaScript修改

修改notified函数，对每个元素做存在性判断：

function notified(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;

  // 逐个检查元素是否存在，再修改样式
  var main_note = document.getElementById("cookienote");
  if (main_note) main_note.style.display = 'none';

  var main_message = document.getElementById("cookiemessage_main");
  if (main_message) main_message.style.display = 'none';

  var inner_message = document.getElementById("cookiemessage_inner");
  if (inner_message) inner_message.style.display = 'none';
}

方式二：利用jQuery简化代码（推荐，因为你已经引入了jQuery）

jQuery会自动忽略不存在的元素，不会报错，代码更简洁：

function notified(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;

  // 一次性选择所有目标元素并隐藏
  $("#cookienote, #cookiemessage_main, #cookiemessage_inner").hide();
}

这样修改后，不管页面存在哪几个元素，都会被正确隐藏，同时Cookie的设置也不受影响。

内容的提问来源于stack exchange，提问作者Vasiliy Moroz