Сделать атрибут href в <a>Tag реагирующим - PullRequest
Новая
       2

Сделать атрибут href в <a>Tag реагирующим

0 голосов
/ 10 апреля 2020

У меня есть следующий HTML код: 

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

Этот код отображает поле ввода номера и кнопку, которая ссылается на маршрут для express.

Мой вопрос: как я могу получить число, введенное в поле ввода, в качестве параметра для атрибута href тега <a>?

Мне также нужно отправить количество, которое пользователь хочет добавить в корзину, в мой маршрут, чтобы я мог добавить его в корзину.

Ваша помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 10 апреля 2020

Прослушайте событие изменения, которое будет запущено на узле input:number, затем просто сбросьте атрибут href на узле привязки, как показано в примере ниже. Можно также просто использовать обработчик событий click, чтобы window.location создать созданный URL-адрес, или переключиться на 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>
...