How can i add an "onclick function" inside a `literal template` which is inside a Class?

Question

this if my first question here, so sorry for any mistake or if the question is too silly.

*I have a Class with a method that displays a country-card on screen. I need to add an onclick function to save the name of the country so I can access to it from another page. i don't know if there is a way to make it work.

Any ideas?

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);
    }
}

@maxPeng Hi max! for example, * like this, the function is not recognized * In this case, the function is called right after the page is loaded I m still trying to figure it out. — Lucas Gomez, Nov 06 '19 at 21:39

score 2 · Accepted Answer · answered Nov 07 '19 at 02:35

I assume that the country.name is unique.

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);
  }
}

Also, you can refer to this post: Setting HTML Button`onclick` in template literal

Thanks Max Peng! It solved the problem. It's true, way better adding an eventlistener than an onclick function. — Lucas Gomez, Nov 08 '19 at 01:35

How can i add an "onclick function" inside a `literal template` which is inside a Class?

1 Answers1