使<a>标签中的 href 属性具有反应性</a>

Question

I have the following HTML code:

<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>

This code displays an input number field and a button that links to a route for express.

My question is, how can I get the number entered in the input field as a parameter to the href attribute of the <a> tag?

I need to also send the quantity the user wants to add to the shopping cart, to my route so I can add that to the cart.

Your help would be most appreciated.

Answer 1

Listen for the change event to be fired on the input:number node, then just reset the href attribute on the anchor node, as shown in the example below. Could also just use a click event handler to window.location to the created URL or switch to a form

 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>