Pop-up box javascript+PHP code mixture not working?

Question

I'm working on a massive project which includes a pop-up box with cookie information that will only open the first time in the session but somewhere in the mess of javascript and PHP I seem to have made a mistake or something as it's not appearing whatsoever...

Here's the snippet of code:

<div  id='popup' style='border-radius: 1vw; display: hidden; background-color: white; padding: 2vw; position: fixed; top: 20%; right: 25%; z-index: 999; width: 50vw; height: auto; margin-left: 15; margin-right: 15; border-style: solid; border-color: #181818; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);'>
<a  class="sidebar" style="position:absolute; top:0 ;right: 1vw;font-size: 36px; margin-left: 50px;" #href="javascript:void(0)" class="closebtn" onclick="closePopUp()">&times;</a> <!-- The button which activates Javascript to close the pop up box -->
<img id='cookiepic' src='cookie.jpg' style='width: 3vw; height: 3vw; display: hidden;'>
<p class='spacedfont' style='display: inline' > &nbsp Oh, and by the way...</p>
<hr>
<div style='display: flex; flex-direction: row; display:hidden;' id='cookieinfo'>
<p id='cookiep' style='letter-spacing: 1px;'>
As is common practice with almost all professional websites, this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience.
<br><br>This page describes what information they gather, how we use it and why we sometimes need to store these cookies.
<br><br>We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.
<br><br>By closing this notice or continuing to use the site, you consent to our use of cookies.
</p>

</div>

<div style='display: flex; flex-direction: row; display:hidden;' id='aboutinfo'>
<p id='aboutp'>
We're a fresh business to the world of e-commerce that aims to bring you the best experience shopping online.
<br><br>Our business is based in the UK but our web of business relationships stretches worldwide to deliver you the best service.
<br><br>Part of our ethos is innovation, a key role in our success which allows us to scour the globe for offers and deals to bring to you almost daily. Be sure to check the featured panel for a taster of what we've found recently!
<br><br>If you'd like to know anything else, email a member of our friendly team at xxxxx@gmail.com
</p>

</div>
</div>




<script>
function closePopUp() {
    document.getElementById("popup").style.display = "none";
    document.getElementById("cookieinfo").style.display = "none";
    document.getElementById("cookiepic").style.display = "none";
    document.getElementById("aboutinfo").style.display = "none";
}
function openPopUp() {
    document.getElementById("popup").style.display = "block";

}
function showCookie() {
    document.getElementById("popup").style.display = "block";
    document.getElementById("cookieinfo").style.display = "inline";
    document.getElementById("cookiepic").style.display = "inline";
    <?php
    $_SESSION['cookieconsent'] = true;
    ?>
}
function showAbout() {
    document.getElementById("popup").style.display = "block";
    document.getElementById("aboutinfo").style.display = "inline";
}

closePopUp();

<?php
if(empty($_SESSION['cookieconsent'])) {
    echo "showCookie()";
}
?>
</script>

Does anybody know what's wrong? Any help will be much appreciated and, for the record, I prefer to keep CSS inline.

Answer 1

The php code inside showCookie() will always be executed (because clientside javascript doesn't affect the serverside php code).
So at the time you get to the button, $_SESSION['cookieconsent'] will always be set (and therefore showCookie() will never be called).

Quick solution:

move $_SESSION['cookieconsent'] = true; to after echo "showCookie()"; :

<?php
if(empty($_SESSION['cookieconsent'])) {
    echo "showCookie()";
    $_SESSION['cookieconsent'] = true;
}
?>