how to Add event listener to template string

Question

I have created a class, I am dynamically filling the statement in the template string with a loop, one of them is a picture, and I want to add an event listener click to the picture so that by clicking on this photo something can happen and how much is it possible?

my class:

class Statement {
constructor(title,image,description,price){
this.title=title;
this.image=image;
this.description=description;
    this.price=price;
    
}
}


const statement16 = new Statement('element',"https://smenterprise.ge/wp-content/uploads/2019/09/IMG-20190902-WA0035.jpg","ist a good condition",199);

const statementsArray=[statement1,statement2,statement3,statement4,statement5,statement6,statement7,statement8,statement9,statement10,statement11,statement12,statement13,statement14,statement15,statement16]


const appendStatement=(statement)=>{
    const statementTemplate=`
    <div class="statement">
    <p class="statementTitle"> ${statement.title}</p>
    <img class="statementImg" src=${statement.image} alt="">
    <p class="description">${statement.description}  </p>
    <p class="productPrice">${statement.price} ₾ </p>
  
    </div>
    `
 
    productList.innerHTML+`enter code here`=statementTemplate


}

const appendAllStatements=(statements)=>{
  for(const statement of statements){
appendStatement(statement);

  }
}

You can't add an event to a template literal. Please edit the title to describe your problem. — Teemu
– Teemu, Commented Jan 21, 2021 at 17:10

Jairo Nava Magaña · Accepted Answer · 2021-01-21 19:17:22Z

1

Just as a side note as Teemo commented your title is misleading.

Also here I found a possible solution, although it is using JQuery.

If you don’t want to use JQuery I would attach the event to the image tag, maybe even pass a parameter like so:

const appendStatement=(statement)=>{
    const statementTemplate=`
    <div class="statement">
    <p class="statementTitle"> ${statement.title}</p>
    <img class="statementImg" src=${statement.image} alt="" onclick="some_function(${statement.image})">
    <p class="description">${statement.description}  </p>
    <p class="productPrice">${statement.price} ₾ </p>
    </div>
    `
 
    productList.innerHTML+`enter code here`=statementTemplate
}

answered Jan 21, 2021 at 19:17

Jairo Nava Magaña

2611 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to Add event listener to template string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related