javascript - 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">也就是说...好吧，提交表单。