将CSS“display：none;”更改为显示

I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.

我想在网站加载时隐藏我网站上的元素，但是当用户提交表单时，它会更改为显示。我已经试了几个小时了，不能让它上班。

Code:

码：

HTML

HTML

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

CSS

CSS

.hidden {
  display: none;
}

JavaScript

JavaScript的

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

Disclaimer: I only included relevant code.

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

Hope somebody is able to help me/spot the error!

希望有人能够帮助我/发现错误！

4 个解决方案

#1

I would remove the hidden class:

我会删除隐藏的类：

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

(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)

（classList具有非常广泛的支持，如果需要，可以在过时的浏览器上进行填充。）

Live Example (using a button click instead of a form submit):

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

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">

#2

You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:

您必须返回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>

#3

i think this is a solution

我认为这是一个解决方案

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

#4

What about if you use jQuery instead?

如果你使用jQuery呢？

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

Remember to add the library above the code.

请记住在代码上方添加库。

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

#1