Как я могу получить идентификатор выбранного продукта в firestore web?

#javascript #html #google-cloud-firestore

#javascript #HTML #google-облако-firestore

Вопрос:

как я могу получить значение выбранного элемента из firebase firestore, который я использовал innerHTML для перечисления своих продуктов на своей странице, и у каждого из них есть кнопка, и когда я нажимаю на кнопку, я хочу получить id название продукта, который удерживает кнопку. это мой js inneHTML и firestore getter

 database.collection("product").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
    const productid = doc.data().id;
    const productname = doc.data().name;
          productsList.innerHTML  = "<div class='product-container' ><div class='course'><h2>"  productname  "</h2><h6>"  productid  "</h6><button id='editbutton' class='btn' >Edit Product</button></div></div></div>"
        });
    })

1. Не похоже, что вы вообще что-либо сделали для обработки нажатия кнопки. Я предлагаю добавить этот код, чтобы мы могли лучше понять, где конкретно вы застряли.

2. я, безусловно, не знаю, как получить значение, и я нигде не могу его найти, вот почему я спросил @DougStevenson

3. Без написания кода для обработки нажатия у вас нет шансов получить идентификатор при нажатии кнопки. Первая проблема, с которой вы сталкиваетесь здесь, заключается в добавлении обработчика кликов. Вторая проблема заключается в том, чтобы убедиться, что у него есть доступ к идентификатору.

Ответ №1:

Вам нужно будет прикрепить прослушиватель кликов к кнопке, а затем посмотреть идентификатор, на который пользователь нажал в DOM. Есть много способов сделать это, один из которых:

 productsList.addEventListener('click', function(e) {
  e.preventDefault();
  if (e.target.localName === 'button') {
    var h6 = e.target.parentElement.getElementsByTagName("h6")[0];
    alert(h6.textContent);
  }
  return false;
});

Рабочий пример:https://jsbin.com/pewohax/edit?html ,js, вывод

1. он работает хорошо, спасибо за это, но он показывает мне эту ошибку index.js:28 Uncaught TypeError: Cannot read property 'textContent' of undefined at HTMLDivElement.<anonymous> это нормально?

2. index.js:28 является ли эта строка alert(h6.textContent);

3. Похоже, что у некоторых элементов нет h6 дочернего элемента? Если это не устранится, можете ли вы попытаться воспроизвести это на сайте, подобном jsbin, как я сделал в своем ответе? Это гарантирует, что мы оба смотрим на одно и то же.

4. Да, я сделал то, что вы точно сделали

5. Можете ли вы попытаться воспроизвести его на сайте, подобном jsbin, как я сделал в своем ответе?

Ответ №2:

В дополнение к ответу Фрэнка ван Пуффелена, который я изменил e.target.localName === 'button' на e.target.id == 'button' bacuse, первый получит каждый элемент, который является кнопкой, поэтому вы меняете его, чтобы получить его с идентификатором кнопки или любого другого элемента.

это полный код

   e.preventDefault();
  if (e.target.id == 'button') {
    var h6 = e.target.parentElement.getElementsByTagName("h6")[0];
    alert(h6.textContent);
  }
  return false;
});

автор: Фрэнк ван Пуффелен

1. Взять код из другого ответа и внести изменения недостаточно, чтобы затем составить новый ответ. Если вы ожидаете, что люди будут продолжать помогать вам, я бы рекомендовал оценивать их работу не только упоминанием в ответе на копирование / вставку / изменение.

2. Извините, я не знал, как вам отдать должное, я думал, что это способ, что мне делать