页面刷新导致动态生成的 QR 图片瞬间消失，根本原因是 默认为 type="submit"，触发表单提交并重载页面；只需显式设置 type="button" 即可阻止默认行为。
页面刷新导致动态生成的 qr 图片瞬间消失，根本原因是 `
在您的 HTML 代码中，
✅ 正确修复方式：为按钮显式添加 type="button"，彻底禁用表单提交行为：
<button id="btn" type="button" onclick="generateQR()">Generate QR Code</button>
⚠️ 额外优化建议（提升健壮性与用户体验）：
- 避免内联事件：推荐使用 addEventListener 替代 onclick，解耦结构与逻辑；
- 校验前置：在生成前检查输入有效性，避免无效请求；
- 加载态反馈：可临时禁用按钮或显示 loading 提示，防止重复点击；
-
错误处理：为
添加 onerror 回调，捕获 QR 接口失败（如 URL 格式错误、网络异常）。
优化后的 JS 片段示例：
document.getElementById("btn").addEventListener("click", function () {
const url = qrText.value.trim();
if (!url) {
alert("Please enter a valid URL");
return;
}
// 动态拼接 QR 请求（注意 URL 编码）
const encodedUrl = encodeURIComponent(url);
const size = qrSize.value || "150";
qrImage.src = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodedUrl}`;
imgBox.classList.add("show-img");
});
同时，确保 CSS 中 .show-img 的过渡平滑（可选）：
#imgBox {
transition: max-height 0.3s ease-in-out, opacity 0.2s;
}
#imgBox.show-img {
max-height: 300px;
opacity: 1;
}
总结：表单内按钮必须显式声明 type="button" 才能安全执行自定义 JS 逻辑；这是前端表单交互中最易忽略却高频出现的陷阱之一。
