使用JavaScript动态设置HTML按钮data-item-price属性的方法

首先先把静态HTML里的属性写规范，所有自定义属性的值都用双引号包起来，别直接把运算表达式写在静态属性里，初始按钮可以先把data-item-price留空或者给个默认值，参考写法：

<button class="snipcart-add-item"
  data-item-id="Job123"
  data-item-price=""
  data-item-url="www.abc.co/priceevaluation"
  data-item-name="Validate">
  Add to cart
</button>

接下来写JS逻辑就行，核心就是拿到按钮DOM，算好18乘动态值的结果，用原生的datasetAPI给属性赋值：

// 这里替换成你自己拿动态数值的逻辑，不管是从全局变量、接口返回、URL参数取都可以
const dynamicValue = 3; // 示例动态值，实际替换成你的真实数据源

// 等页面DOM加载完再执行操作，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const cartBtn = document.querySelector('.snipcart-add-item');
  if (!cartBtn) return;
  // 算最终价格，如果你的动态值是字符串，记得先转Number类型再乘，比如Number(dynamicValue)
  const finalPrice = 18 * dynamicValue;
  // dataset的驼峰命名会自动对应到data-*的短横线命名，itemPrice对应data-item-price
  cartBtn.dataset.itemPrice = finalPrice;
})

几个要注意的点：

• 如果你的动态值是异步拿到的（比如调接口之后才返回），不用等DOMContentLoaded事件，直接在拿到值的回调里写选中按钮、赋值的逻辑就行。
• 优先用dataset操作data-*属性，比手动写setAttribute更符合标准，也不容易写错属性名。
• 做乘法之前一定要确认动态值是数字类型，要是拿到的是字符串比如"2"，先转成数字再运算，不然会出字符串拼接的bug。

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