HTML按钮onclick属性问题：点击触发JS生成新SHA256哈希值

直接把核心逻辑封装成可复用的函数，就能轻松实现按钮点击刷新哈希值的需求，具体步骤如下：

1. 封装生成并更新哈希的函数 #

把生成随机字符串、计算SHA-256哈希、更新输入框的逻辑打包成一个独立函数，方便多次调用：

function updateHash() {
  // 生成20位随机字符串
  const randomString = makerandomstring(20);
  // 计算SHA-256哈希值
  const newHash = sha256(randomString);
  // 更新只读输入框的内容
  document.getElementById('sha256hash').value = newHash;
}

2. 页面初始化时执行一次 #

保持原来的DOM加载完成后初始化的逻辑，改成调用这个封装好的函数：

// DOM加载完成后自动生成初始哈希值
document.addEventListener('DOMContentLoaded', updateHash);

3. 给按钮绑定点击事件 #

有两种实现方式，选一种就行：

方式一：直接在HTML的onclick属性中绑定 #

修改按钮的HTML代码，把onclick属性设为调用封装的函数：

<button onclick="updateHash()">Regenerate</button>

方式二：用JavaScript绑定事件（推荐解耦写法） #

先给按钮加个ID：

<button id="regenerateBtn">Regenerate</button>

然后在JS中添加事件监听：

document.getElementById('regenerateBtn').addEventListener('click', updateHash);

这样点击"Regenerate"按钮时，就会重新执行所有逻辑，生成新的随机字符串、计算哈希值并更新输入框内容。

内容的提问来源于stack exchange，提问作者jordimetil