Блог

Я новичок в Handlebars.js . Я использую каждую из них для отображения некоторой учетной записи.Мне нужно получить информацию о конкретном пользователе, нажимающем кнопку. Я буду более конкретен с кодом.

 
{{#each accounts}}

      <div class="form-group">
        <p>{{@index}}</p>
        <label for="name" value={{username}}>{{username}}</label>
      </div>
      <div class="form-group">
        <label for="name">{{email}}</label>
      </div>
      <button id="myButton">chat</button>


    {{else}}
    <p>No account</p>
    {{/each}}



<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function(e) {
  console.log('button was clicked');
  const number = document.querySelector("p");
   console.log(number);
  });

</script>
  

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

У вас в цикле есть id =»MyButton». Идентификаторы должны быть уникальными, и с вашим кодом вы получите столько кнопок с id = «MyButton», сколько у вас учетных записей. Попробуйте вместо этого добавить класс, если вы хотите добавить свое событие для всех кнопок.

 {{#each accounts}}

      <div class="form-group">
        <p>{{@index}}</p>
        <label for="name" value={{username}}>{{username}}</label>
      </div>
      <div class="form-group">
        <label for="name">{{email}}</label>
      </div>
      <button id="myButton{{@index}}" class="myButton">chat</button>


    {{else}}
    <p>No account</p>
    {{/each}}



<script>
  const buttons = document.getElementsByClassName('myButton');
  buttons.addEventListener('click', function(e) {
  console.log('button was clicked');
  const number = document.querySelector("p");
   console.log(number);
  });

</script>