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

免责声明:我只包含相关代码.

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

Answer 1

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

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

(classList具有非常广泛的支持,如果需要,可以在过时的浏览器上进行填充.)

实例(使用按钮单击而不是表单提交):

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