Как я могу добавить функцию onclick внутри «буквального шаблона», который находится внутри класса?

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

* У меня есть класс с методом, который отображает карту страны на экране. Мне нужно добавить функцию onclick, чтобы сохранить название страны, чтобы я мог получить к ней доступ с другой страницы. я не знаю, есть ли способ заставить его работать.

Любые идеи?

class UI {
    constructor() {
         this.cardsContainer = document.querySelector("#cards-container");
     }

    showCountries(data) {
        data.forEach(country => {
            let div = ` 
            <div class="card">
                // this is the onclick function i need to access  
                <a onclick="countrySelected(${this.country.borders})"> 

                <div class="card-image">
                <img src=${country.flag} alt="">
                </div>
                <div class="card-info">
                 <h2 class="card-name"> ${country.name}</h2>
                 <p><strong>Population:</strong> ${country.population}</p>
                 <p><strong>Region:</strong> ${country.region}</p>
                 <p><strong>Capital:</strong> ${country.bogota}</p>
                </div>
                </a>
            </div>
           `;
        this.cardsContainer.innerHTML += div;
      })
    }

    //method 
    countrySelected(data) {
        sessionStorage.setItem('country', data);
    }
}

javascript class template-literals
person Lucas Gomez    schedule 05.11.2019    source источник
comment
в чем проблема с вашим подходом?   -  person Max Peng    schedule 06.11.2019
comment
@maxPeng Привет Макс! например * ‹a onclick=countrySelected(${this.country.borders})› вот так, функция не распознается * ‹a onclick='${this.countrySelected(country.name)}' href=#› В этом случае функция вызывается сразу после загрузки страницы, я все еще пытаюсь понять это.   -  person Lucas Gomez    schedule 07.11.2019

Ответы (1)


arrow_upward
2
arrow_downward

Я предполагаю, что country.name уникален.

class UI {
  constructor() {
    this.cardsContainer = document.querySelector("#cards-container");
  }

  showCountries(data) {
    data.forEach(country => {
      let div = ` 
            <div class="card">
                // this is the onclick function i need to access  
                <a id=${country.name}> 

                <div class="card-image">
                <img src=${country.flag} alt="">
                </div>
                <div class="card-info">
                 <h2 class="card-name"> ${country.name}</h2>
                 <p><strong>Population:</strong> ${country.population}</p>
                 <p><strong>Region:</strong> ${country.region}</p>
                 <p><strong>Capital:</strong> ${country.bogota}</p>
                </div>
                </a>
            </div>
           `;

      this.cardsContainer.innerHTML += div;
      document.querySelector(`a[id="${country.name}"]`)
              .addEventListener('click', () => countrySelected(country.borders));
    })
  }

  //method 
  countrySelected(data) {
    sessionStorage.setItem('country', data);
  }
}

Кроме того, вы можете обратиться к этому сообщению: Настройка HTML Button`onclick` в литерале шаблона

person Max Peng    schedule 07.11.2019
comment
Спасибо, Макс Пэн! Это решило проблему. Это правда, гораздо лучше добавить прослушиватель событий, чем функцию onclick. - person Lucas Gomez; 08.11.2019
comment
рад слышать. :D - person Max Peng; 08.11.2019