javascript - html/js onclick 未按要求工作

Question

Html/js 未按预期工作。当我单击“发送电子邮件”按钮时，我希望永久显示“电子邮件已发送到您的地址”的消息。但实际发生的情况是消息显示不到 1 秒就消失了。当我一次又一次点击但不永久显示时，也会发生同样的情况。

<form>
<table>
  <tr>
    <td>
    <label>Email Address:</label>
    </td>
    <td>
    <input type="text" name="Email" placeholder="Email" />
    </td>
  </tr>
    <td>
    </td>
    <td><br/><br/>
    <input id="btnSave" type="submit" value="Send Email" onclick="val()" />
    </td>
  </tr>
</table>
</form>
<div id="msg">
</div>


<script>
function val (){
  if (document.getElementsByName("Email").value =="")
   {
    document.getElementById("msg").innerHTML='<p>No data entered</p>'
   }
  else
   {
   document.getElementById("msg").innerHTML='<p>An Email has been sent to your address</p>'
   }
}
</script>

Answer 1

因为这是一个表单，而“发送电子邮件”按钮是一个提交按钮，当您单击它时，它会提交表单，从而触发页面刷新。这就是为什么消息只出现很短一段时间的原因。

您可以阻止通过 JavaScript 提交表单。

如果您不需要表单(您现在没有使用它做任何事情)，您也可以简单地删除该表单。