html javascript 改变我的值 <div> 但是刷新页面1秒然后全是null

Question

我正在尝试在我的表单下显示新值。

    <form>
    <h2>AES Encryption</h2>
  <table>
  <tr>
  <td>
    <label for="inputValue">Text to encrypt</label>
  </td>
  <td>
    <input type="text" id="inputValue" size="50" name="inputValue" />
    </td>
  </tr>
  <tr>
    <td>
  <label for="inputPassword">Password:</label>
  </td>
  <td>
  <input type="text" id="inputPassword" size="50" name="inputPassword" />
  </td>
  </tr>
  <tr>
  <td>
    <input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
  </td>
  </tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>

<h3>Code</h3>
<a href="sampleAES.zip" download="sampleAES.zip">Download</a>


</div>

</form>

和我的脚本：

function encryptAES() {
    var value = document.getElementById("inputValue").value;
    var password = document.getElementById("inputPassword").value;
    var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
    document.getElementById("afterPressed").removeAttribute("hidden");
    document.getElementById("resultTitle").innerHTML = "Result";
    document.getElementById("result").innerHTML = encrypted;
}

当我点击按钮时，代码工作 1 秒，然后将表单刷新为 null 我想在 div 结果标签中显示结果，但是页面已更新，所有内容都消失了，代码又被隐藏了。

Answer 1

您的表单正在提交，因此值会显示在浏览器中，然后页面会重新加载。

您可以像这样设置 onsubmit 属性的形式：

<form onsubmit="return false;">

或者您可以使用 <input type="button"> 或 <button> 而不是 <input type="submit"> 那是...好吧，提交表单.

Answer 2

使用 <form onsubmit="return false;"> 更新您的表单标签。这将阻止页面被提交。

html javascript 改变我的值 <div> 但是刷新页面1秒然后全是null

html javascript chage the value of my <div> but refresh the page for 1 second and then is all null

html

javascript

tags

jquery

hidden