向 Tag “href” attribute添加另一个参数

Question

我有以下代码：

<input id="number" type="number" value="1" min="1" max="10"> <a href="/products/add-to-cart/<%= products[i]["_id"] %>" class="btn btn-light">Add to cart</a>

此代码显示输入数字字段和链接到快递路线的按钮。

我的问题是，如何获得在输入​​字段中输入的数字作为标签的“ href”属性的参数？

我还需要将用户要添加到购物车的数量发送到我的路线，以便可以将其添加到购物车。

非常感谢您的帮助。

Answer 1

侦听要在input:number节点上触发的更改事件，然后仅重置锚点节点上的href属性，如下例所示

(() =>
{
  document.querySelector('#number')
    .addEventListener('change', evt =>
    {
      const value = evt.target.value;
      document.querySelector('a').href = `/products/add-to-card/${value}`;
      console.log(`HREF is now : ${document.querySelector('a').href}`);
    }, true);
})();

<input id="number" type="number" value="1" min="1" max="10">
<a href="/products/add-to-cart/1" class="btn btn-light">Add to cart</a>