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

Question

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

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

Disclaimer: I only included relevant code.

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

Answer 1

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

 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

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.)

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

Answer 3

我认为这是一个解决方案

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

Answer 4

What about if you use jQuery instead?

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