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

useryNYh1 0
Viewed 29

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:

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

website: evthewebdev.com

HTML + JS

<body>
    <!-- announcement bar -->
    <div class="announcement-bar" id="announcement-bar">
        <div class="announcement-bar-content">
            <p>I am currently available for work.</p>
        </div>
        <button class="announcement-bar-close-btn" onclick="myFunction()"><i class="fas fa-times"></i>
        </button>
    </div>

    <div class="container">

</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;
}
elementor wordpress javascript css html
1 Answers

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 class="announcement-bar" id="announcement-bar">
        <div class="announcement-bar-content">
            <p>I am currently available for work.</p>
        </div>
        <button class="announcement-bar-close-btn" onclick="myFunction()"><i class="fas fa-times"></i>
        </button>
    </div>  

    <div class="container">
    <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>

Huda Addelson0
Related