Popup close button not working. "ReferenceError: myFunction is not defined"-CodePudding

I am trying to create an announcement bar at the top of my webpsite pages that pushes down the content of the page when active and when closed, returns the content to the top of page.

Im having problems with:

Close button funcionality not working/closing the popup
Pushing the content down when bar is active.
Pushing the content up when bar is closed.

website: evthewebdev.com

HTML JS

<body>
    <!-- announcement bar -->
    <div  id="announcement-bar">
        <div >
            <p>I am currently available for work.</p>
        </div>
        <button  onclick="myFunction()"><i ></i>
        </button>
    </div>

    <div >

</body>

<style type="text/javascript">
function myFunction() {
    var x = document.getElementById("announcement-bar");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</style>

CSS

/* announcement bar */
.announcement-bar {
    background: #FDFDFD;
    height: 45px;
    width: 100%;
}

.announcement-bar-content {
    padding: 10px;
    width: 95%;
    float: left;
    height: 45px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.announcement-bar-content p {
    font-family: "IBM Plex Mono";
    font-size: 0.9rem;
    font-weight: 600;
    color: #2B3030;
}

.announcement-bar-content a {
    color: #fff;
}

button.announcement-bar-close-btn {
    height: 100%;
    width: 5%;
    background: #2B303080;
    color: #2B3030;
    border: none;
}

.hello-pop-work {
    text-decoration: underline;
    padding: 0 5px 0 5px;
}

CodePudding user response：

you have the wrong tag name, the function should be wrapped in a script tag, not a style, an example like the one below

/* announcement bar */
.announcement-bar {
  background: #fdfdfd;
  height: 45px;
  width: 100%;
}

.announcement-bar-content {
  padding: 10px;
  width: 95%;
  float: left;
  height: 45px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.announcement-bar-content p {
  font-family: "IBM Plex Mono";
  font-size: 0.9rem;
  font-weight: 600;
  color: #2b3030;
}

.announcement-bar-content a {
  color: #fff;
}

button.announcement-bar-close-btn {
  height: 100%;
  width: 5%;
  background: #2b303080;
  color: #2b3030;
  border: none;
}

.hello-pop-work {
  text-decoration: underline;
  padding: 0 5px 0 5px;
}

  <!-- announcement bar -->
    <div  id="announcement-bar">
        <div >
            <p>I am currently available for work.</p>
        </div>
        <button  onclick="myFunction()"><i ></i>
        </button>
    </div>  

    <div >
    <script type="text/javascript">
            function myFunction() {
                var x = document.getElementById("announcement-bar");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }
    </script>