CODEWITHSUNDEEP
javascriptpug
Chris Clark
Chris Clark

Reputation: 528

Is there a way for me to have Pug interpret a JavaScript variable as HTML code?

I'm not sure how to best word this question, but I'm wondering if/how I can dynamically alert Pug code using a JavaScript variable. In the example below, I want displaystarNumber to be included as HTML code that reads span.stars-container.stars-50 ★★★★★. (In this specific instance, review.rating * 10 would come out to be 50). Is there a way to accomplish this? My attempt included below renders the code as a string that is visible on the front end of the page.

-var starNumber = review.rating * 10
-var displaystarNumber = `span.stars-container.stars-${starNumber} ★★★★★`
span #[Strong Rating]: #{review.rating} #{displaystarNumber}

Upvotes: 0

Views: 76

Answers (1)

Sean
Sean

Reputation: 8031

A better way to write this would be—

- var starNumber = review.rating * 10

span
  strong Rating
  | : #{review.rating} 
  span.stars-container(class=`stars-${starNumber}`) *****

—which should compile to what you're looking for if I'm understanding your approach correctly.

Upvotes: 1

Related Questions