javascript - 单击按钮时显示文本消息

Question

我有创建表单的代码，当您单击“提交”时，它应该在屏幕上输出文本。但是，我的代码不会在屏幕上显示消息，尽管它会快速显示文本然后隐藏它。

<div id="form-wrap">
<form>
    <fieldset>
    <h4>Contact Form:</h4>
        <label class="labelone" for="name">Name: </label>           
        <input name="name"/>
        <label for="email">Email: </label>
        <input name="email" />
        <label for="comments">Comments: </label>
        <textarea name="comments"></textarea>
  </fieldset>
<fieldset>
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
<input class="btn" type="reset" value="Reset Form"/>
</fieldset>
</form>
<p id="jomin">This is a message</p>
</div>

风格

<style type="text/css">
#jomin {    visibility:hidden;
}
</style>

JavaScript

<script type="text/javascript">
function myFunction()   {
document.getElementById("jomin").style.visibility="visible";
}
</script>

Answer 1

您没有看到更改，因为正在提交表单并且正在重新加载页面。

更改:

<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>

至

<input class= "btn" type="submit" value="Send Email" onclick="return myFunction()"/>

并且也改变

function myFunction()   {
    document.getElementById("jomin").style.visibility="visible";
}

至

function myFunction()   {
    document.getElementById("jomin").style.visibility="visible";
    return false;
}

<强> jsFiddle example