将 CSS "display: none;" 更改为所示

Question

我想在网站加载时隐藏我网站上的一个元素，但当用户提交表单时，它会变为显示。我现在已经尝试了几个小时，无法正常工作。

代码：

HTML

<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>

CSS

.hidden {
  display: none;
}

JavaScript

function show () {
  document.getElementById("mymessage").style.display = 'block';
}

免责声明：我只包含相关代码。

希望有人能够帮助 me/spot 错误！

Answer 1

您必须 return false 以防止浏览器刷新页面，以便您可以在提交时隐藏该元素：

function show () {
  document.getElementById("mymessage").style.display = 'block';
  return false;
}

.hidden {
  display: none;
}

<form onsubmit="return show();">


<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>

Answer 2

我会删除 hidden class:

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
}

（classList 有非常广泛的支持，如有必要，可以在过时的浏览器上进行 polyfill。）

实例（使用按钮点击而不是表单提交）：

function show () {
  document.getElementById("mymessage").classList.remove("hidden");
  return false;
}

.hidden {
  display: none;
}

<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">

Answer 3

如果您改用 jQuery 呢？

</script>
    <script>
    $(document).ready(function(){
        $("form").submit(function(){
            jQuery('#mymessage').show();
        });
    });
    </script>

记得在代码上面添加库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

Answer 4

我认为这是一个解决方案

document.getElementById("mymessage").classList.remove("hidden");

将 CSS "display: none;" 更改为所示

Change CSS "display: none;" to shown

html

javascript

css

forms

display