Question

我的网站存在问题。我想在点击按钮时显示div并在另一个按钮上单击隐藏它以便我使用JavaScript函数

    function DisplayMessage() {
        var messagebox = document.getElementById("messageConfirmation");
        messagebox.style.display = "block";
    }
    function HideMessage() {
        var messagebox = document.getElementById("messageConfirmation");
        messagebox.style.display = "none";
    }

但是当我使用它们<div>只显示和隐藏片刻，然后再次出现/消失时，我真的不知道是什么会导致这样的问题所以我会非常感谢你的答案。完整的HTML页面代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        div.wrap {
            width: 850px;
            margin: 0 auto;
        }
        div.messageBox{
            display:none;
            width:500px;
            height:60px;
            background-color: rgb(200, 200, 175);
        }
    </style>
    <script>
        function DisplayMessage() {
            var messagebox = document.getElementById("messageConfirmation");
            messagebox.style.display = "block";
        }
        function HideMessage() {
            var messagebox = document.getElementById("messageConfirmation");
            messagebox.style.display = "none";
        }
    </script>
   </head>
    <body>
    <div class="wrap">
        <div class="messageBox" id="messageConfirmation" >
            <p>Message</p>
            <form>
                <button onclick="HideMessage()">HideME</button>
            </form>
        </div>
        <div>
            <form>
                <button onclick="DisplayMessage()">ShowMe</button>
            </form>
        </div>
    </div>

</body>
</html>

Answer 1

默认情况下，<button>元素中的<form>将像submit按钮一样，因此一旦您的代码运行，表单就会提交并刷新页面，因此它会返回到了旧州。将其type更改为button以实现您的目标：

<button type="button" onclick="HideMessage()">HideME</button>

JavaScript不保存样式属性

1 个答案: