set a cookie on click and then check if the cookie is set and dont show that message again

HTML

<div class='message' id='message'>
  <p>This is a message</p>
  <button onclick="cookie_set();">Close</button>
</div>
<button onclick="cookie_delete();">Delete Cookie</button>

CSS

.message {
	text-align:center;
  	padding:30px;
  	border-radius:5px;
  	border:3px solid rgba(255,255,255,0.3);
  	margin:0 auto;
  	width:200px;
  	margin-bottom:10px;
}

Scripts

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>

Javascript

function cookie_check() {
  var cookie_val = Cookies.get('message');
  if(cookie_val == 'true') {
    document.getElementById("message").style.display = "none";
  }
}
function cookie_set() {
  Cookies.set('message', 'true', { expires: 1 });
    document.getElementById("message").style.display = "none";
}
document.addEventListener("DOMContentLoaded", function(event) { 
	cookie_check();
});
function cookie_delete() {
  Cookies.remove('message');
  document.getElementById("message").style.display = "block";
}