弹出关闭按钮不起作用,“引用错误：未定义myFunction”

dgtucam1 于 2022-09-19 发布在 WordPress

关注(0)|答案(1)|浏览(131)

我试图在我的网站页面顶部创建一个公告栏，当活动时向下推送页面内容，当关闭时，将内容返回页面顶部。

我在以下方面有问题：

1.关闭按钮功能不起作用/关闭弹出窗口
1.当bar处于活动状态时，向下推送内容。
1.关闭吧后推送内容。

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;
}

wordpress

来源：https://stackoverflow.com/questions/73738741/popup-close-button-not-working-referenceerror-myfunction-is-not-defined

1条答案

按热度按时间

c3frrgcw1#

您有错误的标记名，函数应该 Package 在脚本标记中，而不是样式中，如下例所示

/* 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>

赞(0）回复(0）举报 2022-09-19

我来回答

弹出关闭按钮不起作用,“引用错误：未定义myFunction”

1条答案

相关问题

热门标签

最新问答