按钮应仅存商品ID（如data-id="1024"），数量由独立number输入框管理，JS读取其value并校验（Number(value) || 1），再通过fetch将ID与数量拼入请求体发送至后端。
按钮怎么带数量参数发给后端
HTML 按钮本身不传递数量，必须靠 JavaScript 把 data-quantity 或输入框值读出来，再塞进 fetch 的请求体里。直接写 value="1024&quantity=3" 是无效的——浏览器只把 value 当字符串发过去，后端收不到结构化字段。
常见错误是把数量硬编码在按钮 value 或 href 里，比如：<button value="1024,3"></button> 或 <a href="?add-to-cart=1024&quantity=3"></a>。这类写法在非表单提交场景（如 fetch）下完全失效，且无法动态响应用户修改。
- 正确做法：按钮只存商品 ID，用
data-id="1024"；数量由独立<input type="number">管理，JS 读取其.value后拼进请求 - WooCommerce 等框架例外：它监听
data-quantity属性，但仅限于标准add-to-cart表单按钮，且不支持逗号分隔多值 - 批量加购必须走 API，不能靠单个按钮模拟——应收集多个
data-id+ 对应数量，统一 POST 到/api/cart/add-batch
input[type="number"] 的 value 怎么安全读取
直接 parseInt(input.value) 在 Safari 和部分安卓浏览器里会崩：用户清空输入框时 input.value 是空字符串，parseInt('') 返回 NaN，后续所有计算全错。
必须加兜底校验，不能只信 type 属性。
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 用
Number(input.value) || 1替代parseInt：前者对空字符串返回0，后者返回NaN；|| 1确保最小为 1 - 显式检查
isNaN(Number(input.value))，命中则设回默认值（如 1），避免静默失败 - 不要依赖
min="1"防负数——JS 可直接赋值input.value = -5，该属性只约束 UI 输入行为
为什么改了 input.value，Vue/React 里数量没更新
因为原生 DOM 操作绕过了框架的数据劫持机制。input.value = 5 不会触发 Vue 的 v-model 或 React 的 onChange 回调。
本质是「状态来源」混乱：你手动改了视图，但没同步更新数据源。
- Vue 场景：别碰
input.value，直接改响应式数据，例如this.cartItems[index].count++，让模板自动重渲染 - React 场景：必须用
setState更新 count，再通过受控组件把新值传给value属性；否则变成半受控，后续输入会报 warning - 若真要操作 DOM（比如第三方库集成），Vue 中需
this.$nextTick()后手动 dispatchinput事件；React 中需调用ref.current.dispatchEvent(new Event('input', { bubbles: true }))
点击按钮前必须做的三件事
加购不是“点一下就完事”，漏掉任意一项都可能引发重复提交、状态错乱或用户无感知。
- 立刻设
button.disabled = true并配 CSS 灰色样式，防止手抖连点导致多次请求 - 从最近的父容器（如
.cart-item）里查data-item-id和对应input[type="number"]的值，别用全局querySelector找错行 - fetch 前检查
response.status：401 跳登录，400 读response.json()提取具体错误（如"库存不足"），别只写.then()忽略.catch()
数量参数从来不是 HTML 自带的能力，它是 JS 主动采集、校验、组装的结果。最容易被忽略的是清空输入框后的 NaN 处理，和框架中绕过响应式直接操作 DOM 的陷阱——这两处一出问题，用户看到的就是“点了没反应”或“数量变0了”。
